Javascript Jest:从自己的包导入时无法读取未定义的属性

我已经创建了一个名为

@package/test

的包。当导入到一个新的、空的React typescript应用程序时，它可以完美地工作。问题从笑话测试套件开始

commonJS

包版本导致Jest抛出：

测试套件无法运行。TypeError:无法读取未定义的属性“getSelectors”

从`@package/Test导入{Test}
常量选择器=Test.getSelectors（…）//此处的错误指示测试未定义

当我编译一个

ES modules

包版本时，它会导致Jest抛出

export * from './common';
^^^^^^
SyntaxError: Unexpected token export

这是我的包中的

src/index.ts

的第一行

我已经测试了许多解决方案，例如：

• 为Jest定义

  transformIgnorePatterns

• 使用

  eslint

  插件和

  Madge

• 在Node.js版本上测试：10.20.0、12.21.0、15.12.0
• 在typescript版本上测试：3.7.5、4.1.2

有关该软件包的一些详细信息：

/*package.json*/
{
“名称”：“@package/test”，
“版本”：“2.4.0”，
“main”：“/dist/index.js”，
“脚本”：{
“构建”：“tsc-b./tsconfig.package.json”
},
“打字”：“/dist/index.d.ts”，
“文件”：[
“区”
],
“依赖项”：{…}，
“对等依赖”：{…}，
“副作用”：“错误”
}

/*tsconfig.package.json*/
{
“扩展”：“../../tsconfig.packages.json”，
“编译器选项”：{“outDir”：“/dist”，“rootDir”：“/src”，“composite”：true}，
“参考文献”：[]，
“包括”：[“src”]，
“排除”：[“src/***.spec.*”、“dist”、“node_modules”]
}

/*tsconfig.packages.json*/
{
“扩展”：“./tsconfig.base.json”，
“编译器选项”：{
“模块”：“es2020”，
“lib”：[“es5”、“es2015”、“es2020”、“dom”]
}
}

/*tsconfig.base.json*/
{
“保存”：false，
“编译器选项”：{
“宣言”：正确，
“源地图”：正确，
“moduleResolution”：“节点”，
“allowSyntheticDefaultImports”：true，
“ForceConsistentCasingFileNames”：true，
“esModuleInterop”：正确，
“resolveJsonModule”：true，
“向下迭代”：正确，
“skipLibCheck”：正确，
“jsx”：“反应”，
“严格”：是的，
“目标”：“es5”
}
}

如何导出

Test

：

import*作为来自“/actions”的操作；
从“/reducer”导入reducer，{Action，RootState}；
从“/getSelectors”导入getSelectors；
导出常量测试={
行动，
减速器，
获取选择器，
};
导出{Action，RootState}；
从“./类型”导出*；
从“./helpers”导出*；

如何导出

getSelectors

：

导出默认函数getSelectors（selectNavigation:Selector）{
const getInitialized=createSelector（选择导航，（s）=>s.initialized）；
...
返回{getInitialized，…}；
}

反应测试应用程序详细信息

/*package.json*/
{
“名称”：“玩笑验证”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“@package/test”：“2.4.0”，
“@测试库/jest dom”：“^5.11.4”，
“@testing library/react”：“^11.1.0”，
“@测试库/用户事件”：“^12.1.10”，
“@types/jest”：“^26.0.15”，
“@types/node”：“^12.0.0”，
“@types/react”：“^17.0.0”，
“@types/react-dom”：“^17.0.0”，
“反应”：“^17.0.2”，
“react dom”：“^17.0.2”，
“反应脚本”：“4.0.3”，
“类型脚本”：“^4.1.2”，
“web重要信息”：“^1.0.1”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
}

/*tsconfig.json*/
{
“编译器选项”：{
“目标”：“es5”，
“lib”：[
“dom”，
“dom.iterable”，
“下一步”
],
“allowJs”：正确，
“skipLibCheck”：正确，
“esModuleInterop”：正确，
“allowSyntheticDefaultImports”：true，
“严格”：是的，
“ForceConsistentCasingFileNames”：true，
“noFallthroughCasesInSwitch”：正确，
“模块”：“esnext”，
“moduleResolution”：“节点”，
“resolveJsonModule”：true，
“隔离模块”：正确，
“noEmit”：没错，
“jsx”：“react jsx”
},
“包括”：[
“src”
]
}

编辑：

---

我用

transformIgnorePatterns

在我的test React应用程序中成功地实现了这一点，但不幸的是，它在Angular 1.6（webpack，babel）应用程序中无法实现。还添加了一些babel插件以将包转换为commonJS，但没有效果。

问题比表面上看起来复杂得多

额外问题：

Jest

未在

json

文件中尊重

Babel

config。我必须将它转换为

js

解决方案1：

• 安装

  @babel/preset env

  作为开发人员依赖项
• 在Babel的配置中将其注册为预设：

env:{
测试：{
预设：['@babel/preset env']，
},
}

• 在

  Jest

  config中注册所需的

  transformIgnorePatterns

• 将此添加到

  Jest

  config:

  “^.+\\.js$”：“babel Jest”

解决方案2：

• 安装

  babel jest

  和

  @babel/plugin transform modules commonjs

  作为开发依赖项
• 在Babel的配置中注册插件：

env:{
测试：{
插件：['@babel/plugin transform modules commonjs']，
},
}

• 在

  Jest

  config中注册所需的

  transformIgnorePatterns

• 将此添加到

  Jest

  config:

  “^.+\\.js$”：“babel Jest”