如何使用使用 es6 的 node_modules 设置 jest [英] How to setup jest with node_modules that use es6

问题描述

我有一个非常简单的测试:

I have a very simple test:

describe('sanity', () => {
  it('sanity', () => {
    expect(true).toBeTruthy()
  })
})

我收到以下错误:

 FAIL  spec/javascript/sanity_test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/piousbox/projects/ruby/<project>/node_modules/@atlaskit/tooltip/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default } from './components/Tooltip';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      3 | import update from "immutability-helper";
      4 | import {components} from "react-select-2";
    > 5 | import Tooltip from "@atlaskit/tooltip";
        | ^
      6 | const isEqual = require("react-fast-compare");
      7 | import _, {replace} from "lodash";
      8 | import { get } from "$shared/request";

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (app/javascript/customer2/components/fob/fob_utils.js:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.593s

我有这个 .babelrc:

I have this .babelrc:

{
  "presets": ["@babel/react", "@babel/env"]
}

我如何让微不足道的测试通过?

How do I make the trivial test pass?

推荐答案

可以通过两种方式通过此测试:

Two ways you can pass this test:

选项 1.) 通过添加测试 env 选项(将定义 testing 环境标志)来设置您的 babel 配置以处理 ES6 导入在您的 package.json 脚本中，例如:"test": "NODE_ENV=testing jest" 或 "test": "BABEL_ENV=testing jest")...

Option 1.) Setup your babel configuration to handle ES6 imports by add a testing env option (the testing environment flag will be defined in your package.json scripts, for example: "test": "NODE_ENV=testing jest" or "test": "BABEL_ENV=testing jest")...

babel.config.js

module.exports = api => {
  api.cache(true);

  return {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
      "@babel/plugin-transform-runtime",
      ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
    env: {
      testing: {
        presets: [
          [ "@babel/preset-env", { targets: { node: "current" }}],
        ],
      },
    },
  };
};

选项 2.) 在您的 webpack.config.js 配置中将 ES6 模块转换为 ES5 语法:

Option 2.) Transpile the ES6 module into ES5 syntax in your webpack.config.js configuration:

webpack.config.js

const { NODE_ENV } = process.env
const inDevelopment = NODE_ENV === "development";

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /.(js|jsx)$/,
        loader: "babel-loader",
        exclude: !inDevelopment ? /node_modules/(?!(@atlaskit/tooltip))/ : /(node_modules)/,
        options: {
          cacheDirectory: inDevelopment,
          cacheCompression: false,
        },
      },
      ...
    ],
  }
  ...
}

这两个选项的主要区别在于第一个选项仅适用于测试环境.如果您尝试在开发/生产环境中使用它，它可能影响其他 3rd 方包并导致编译错误.因此，如果您打算将其移至支持 IE11 及以下的生产环境，则建议使用第二个选项.但是，请记住，每次创建生产构建和/或运行测试套件时，这都会转换包.因此，如果您正在处理一个非常大的项目(或转译多个 ES6 包)，它可能会占用大量资源.因此，我建议将第 3 方包从 ES6 编译到 ES5，并在本地或私下安装(通过 NPM 包).

The major difference between the two options is that the first option will only work in a testing environment. If you try to use it in a development/production environment, it may impact other 3rd party packages and cause compilation errors. Therefore, if you plan on moving this into a production environment that supports IE11 and below, then the second option is recommended. HOWEVER, keep in mind that this will transpile the package every time a production build is created and/or a test suite is run. Therefore, if you're working on a very large project (or transpiling multiple ES6 packages), it can be quite resource heavy. Therefore, I'd recommend compiling the 3rd party package(s) from ES6 to ES5 and installing it/them locally or privately (via an NPM package).

工作示例(此示例包括第二个选项):https://github.com/mattcarlotta/transpile-es6-module

Working example (this example includes the second option): https://github.com/mattcarlotta/transpile-es6-module

安装:

1. cd ~/Desktop &&git clone [e-mail]:mattcarlotta/transpile-es6-module.git
2. cd transpile-es6-module
3. 纱线安装
4. yarn dev 运行演示
5. yarn test 运行测试套件

1. cd ~/Desktop && git clone [e-mail]:mattcarlotta/transpile-es6-module.git
2. cd transpile-es6-module
3. yarn install
4. yarn dev to run the demo
5. yarn test to run test suites

这篇关于如何使用使用 es6 的 node_modules 设置 jest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！