如何在 NX 项目中使用 es6 将 jest 与 node_modules 一起使用

Question

我有一个具有 NX 结构的项目（应用程序 + 库）。我正在为 React + TypeScript 库编写测试。当我尝试使用 suneditor + suneditor-react 时遇到了这个问题：

\n

Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here's what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You'll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n   ...\\node_modules\\suneditor\\src\\plugins\\index.js:4\n    import blockquote from './command/blockquote';\n

\n

我发现这些文件在 node_modules 中时没有被转换，并对 jest 配置进行了更改：

\n

transformIgnorePatterns: [\n     "<rootDir>/node_modules/(?!suneditor|suneditor-react)"\n  ]\n

\n

此后，我在所有测试中不断收到错误：

\n

\xe2\x97\x8f Test suite failed to run\n    Cannot find module 'babel-preset-es2015'\n\n at resolveStandardizedName (../../node_modules/@babel/core/lib/config/files/plugins.js:100:7)\n      at resolvePreset (../../node_modules/@babel/core/lib/config/files/plugins.js:48:10)\n      at loadPreset (../../node_modules/@babel/core/lib/config/files/plugins.js:67:20)\n      at createDescriptor (../../node_modules/@babel/core/lib/config/config-descriptors.js:154:9)\n      at ../../node_modules/@babel/core/lib/config/config-descriptors.js:109:50\n          at Array.map (<anonymous>)\n      at createDescriptors (../../node_modules/@babel/core/lib/config/config-descriptors.js:109:29)\n      at createPresetDescriptors (../../node_modules/@babel/core/lib/config/config-descriptors.js:101:10)\n\n

\n

笑话配置：

\n

module.exports = {\n  displayName: 'component',\n  preset: '../../jest.preset.js',\n  transform: {\n    '^.+\\\\.[tj]sx?$': 'babel-jest',\n  },\n  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],\n  coverageDirectory: '../../coverage/libs/pbc-client-journal',\n  transformIgnorePatterns: [\n     "<rootDir>/node_modules/(?!suneditor|suneditor-react)"\n  ]\n};\n

\n

和 jest.preset.js：

\n

const nxPreset = require('@nrwl/jest/preset');\nmodule.exports = { ...nxPreset };\n

\n

.babelrc：

\n

{\n  "presets": [\n    [\n      "@nrwl/react/babel",\n      {\n        "runtime": "automatic",\n        "useBuiltIns": "usage"\n      }\n    ]\n  ]\n}\n

\n

有人可以帮我解决这个问题吗？

\n

Answer 1

您需要切换到babel.config.jslib 才能将文件从node_modules. 这是在我的项目中起作用的：

babel.config.js

module.exports = {
  presets: [
    [
      "@nrwl/react/babel",
      {
        runtime: "automatic",
        useBuiltIns: "usage"
      }
    ]
  ],
  plugins: []
}

笑话配置.js

module.exports = {
  displayName: 'mylib',
  preset: '../../jest.preset.js',
  transform: {
    '^.+\\.[tj]sx?$': ['babel-jest', { cwd: __dirname }],
  },
  transformIgnorePatterns: [
    "node_modules/(?!(@asyncapi)/)"
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../coverage/libs/mylib',
};