巴贝尔不会编译。测验运行Jest时的js文件

感谢@hannad rehmann朝着正确的方向推动,这是对我有效的解决方案。

安装babel jest

yarn add babel-jest --dev

配置。测试环境用babelrc

Jest会自动将您的环境设置为测试,因此可以将您想要的任何配置复制到测试环境。

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
        ],
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
      ]
    }
  }
}

添加 jest.config.json 到项目根目录

{
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

最后,让您的测试脚本知道在哪里可以找到配置文件

我刚刚将其添加到包中的测试脚本中。json,但您也可以在命令行中运行它。

"scripts": {
    "test": "jest --config=jest.config.json --watch"
},

哦这个问题让我浪费了很多天。这是你需要做的。 在此之前,请检查这些文件。

1) .babelrc 安装相应的模块并将其添加到包中。json 随着jest的不断变化,定义不同的环境支持 NODE_ENV 到 "test"

{
  "presets": [
    [
      "env",
      { "modules": false }],
    "react"
    ],
    "plugins": [
      "react-hot-loader/babel",
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ],
  "env":{
    "test":{
      "presets": [
        "env",
        "react"
    ],
    "plugins": [
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ]}
  }
}

2) 将此添加到 package.json

 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "automock": false,
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/"
    ],
    "transformIgnorePatterns": [
      "/node_modules/"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "modulePathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ]
     }

我对这个问题的理解是,开玩笑会改变你 节点\u环境 到 “测试” 巴贝尔没有任何针对这个环境的配置,我们通常为开发和生产环境定义巴贝尔配置。当没有巴别塔吐丝时, import 关键字实际变成 undefined 因为它实际上不存在于JS上下文中。

对于任何寻求解决方案的人来说,我的问题是 NODE_ENV 环境变量配置为 development 出于某种原因。

现在 JEST仅设置 env 到 test 如果 节点\u环境 尚未定义 ,否则将使用 节点\u环境 . 这意味着如果您在 .babelrc 或 babel.config 为 测验 (如下所示),它将被忽略,默认值(或与 节点\u环境 )将改为使用!

{
...
  "env": {
    "test": { presets: [ "@babel/preset-env" ] }
  }
...
}

因此,如果JEST看起来不转换您的测试文件(哪个符号可以是 SyntaxError: Cannot use import statement outside a module 运行创建给您的 test.js 或 spec.js 文件)我建议您检查一下 节点\u环境 定义 使用 环境 命令(在MacOS和Linux上,或适用于您的环境的适当命令)检查配置的环境变量。如果您已经将其配置为 测验 )您需要删除该命令,或者在jest命令前面加上适当的覆盖: env NODE_ENV=test jest .

我希望它能帮助别人。我花了好几个小时才弄清楚到底发生了什么。。。