Babel.js 如何使用es6的node_modules设置jest

zvokhttg 于 2023-03-21 发布在 Babel

关注(0)|答案(3)|浏览(328)

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

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

我有这个。

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

我如何通过这个琐碎的测试？

babeljs

来源：https://stackoverflow.com/questions/60714101/how-to-setup-jest-with-node-modules-that-use-es6

3条答案

按热度按时间

brgchamk1#

Matt的回答被接受了B/c这是有见地的。为我做的改变是在package.json中添加：

"jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!@atlaskit)"
    ],

您可以通过使用|分隔多个包来一次添加对它们的支持

"jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!module1|module2|etc)"
    ],

赞(0）回复(0）举报 2023-03-21

nzrxty8p2#

有两种方法可以通过此测试：

**选项1。）**通过添加测试env选项（testing环境标志将在package.json脚本中定义，例如："test": "NODE_ENV=testing jest"或"test": "BABEL_ENV=testing jest"）...
巴别塔配置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模块转换为ES 5语法：
网络包配置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,
        },
      },
      ...
    ],
  }
  ...
}

这两个选项的主要区别是第一个选项只能在测试环境中使用。如果您尝试在开发/生产环境中使用它，它可能会影响其他第三方软件包并导致编译错误。因此，如果您计划将其转移到支持IE11和更低版本的生产环境中，则建议使用第二个选项。但是，请记住，这将在每次创建生产构建和/或运行测试套件时传递包。（或传输多个ES6包），它可能是相当重的资源。我建议编译从ES6到ES 5的第三方包，并在本地或私下安装（通过NPM包）。
工作示例（此示例包括第二个选项）：https://github.com/mattcarlotta/transpile-es6-module
要安装：

cd ~/Desktop && git clone git@github.com:mattcarlotta/transpile-es6-module.git
cd transpile-es6-module
yarn install
yarn dev来运行演示
yarn test运行测试套件

赞(0）回复(0）举报 2023-03-21

50pmv0ei3#

**STEP-1.**在根目录下创建.babelrc文件，并在其中包含以下代码

{
    "env": {
      "test": {
        "plugins": ["@babel/plugin-transform-modules-commonjs"]
      }
    }
  }

步骤-2在项目的根文件夹中运行此命令-

npm install --save-dev jest @babel/plugin-transform-modules-commonjs

Jest不能与ES6模块一起正常工作，目前他们已经在他们的网站上提到了这个问题，所以你可以按照上面给出的两个步骤来解决这个问题。

请投票支持此解决方案🙏

赞(0）回复(0）举报 2023-03-21

我来回答

Babel.js 如何使用es6的node_modules设置jest

3条答案

相关问题

热门标签

最新问答