标签: babel-jest

我有一个无法运行的Jest测试套件,因为它尝试测试的组件取决于RequireJS模块.这是我看到的错误:

 FAIL  __tests__/components/MyComponent.test.js
  ? Test suite failed to run

    ReferenceError: define is not defined

      at Object.<anonymous> (node_modules/private-npm-module/utils.js:1:90)

该组件具有以下导入:

import utils from 'private-npm-module';

而private-npm-module设置,如下所示:

define('utils', [], function() {
  return {};
});

当MyComponent使用babel进行转换并在浏览器中运行时,依赖项运行正常.此问题仅影响单元测试.如何让我的测试套件在具有RequireJS依赖关系的组件上运行？

babel-jest我scriptPreprocessor在package.json的jest配置中使用我的.我正在使用jest v0.15.1.

我启动了一个新的反应项目,并且我使用Jest作为测试平台.尽管文档,博客和许多其他资源,如stackoverflow,我总是有一个"意外的令牌导入"错误可能与babel问题有关,但我的conf似乎没问题.欢迎任何帮助.

我的Jest conf(在package.json中).我的package.json有依赖,如babel-jest,babel-preset-es2015,babel-preset-react等.

 "jest": {
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }

我的.babelrc conf:

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    ["transform-runtime"]
  ],
  "env": {
      "test": {
        "presets": ["es2015", "react"]
      }
  } 
}

我的spec文件:

import React from 'react';
import Radio from 'components/ui/radio';
...

和components/ui/radio(第一行引发导入错误):

import Container from './container.jsx';
...

我的webpack有两个名为lib和components的别名(在jest中定义为moduleNameMapper).

...
resolve: {
   mainFiles: ['index', …

我正在试图弄清楚如何让Jest在我的环境中工作,而我遇到的问题是这个项目在node_modules的子目录中有一堆自定义组件.

我收到这个错误:

    FAIL  src/mantle/tools/searchindexer/apps/DataMover/js/components/__test__/GenericJobsTable.test.jsx
      ? Test suite failed to run

        /Users/rob/repos/mesa/ui/node_modules/iggy-common/components/IggyTable.jsx:1
        ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import React, {PropTypes} from "react";
                                                                                                 ^^^^^^
        SyntaxError: Unexpected token import

          at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
          at Object. (src/mantle/tools/searchindexer/apps/DataMover/js/components/JobsTable/GenericJobsTable.jsx:7:18)
          at Object. (src/mantle/tools/searchindexer/apps/DataMover/js/components/__test__/GenericJobsTable.test.jsx:5:25)

    Test Suites: 1 failed, 1 total
    Tests:       0 total
    Snapshots:   0 total
    Time:        2.4s
    Ran all test suites matching "GenericJobsTable".

我运行jest ^20.0.3,并babel-jest ^20.0.3在7.7.1的NodeJS.

在我的package.json中,这是我拥有的jest配置部分:

      "jest": {
        "verbose": true,
        "transform": {
          "^.+\\.jsx$": "babel-jest"
        },
        "moduleFileExtensions": [
          "js",
          "jsx"
        ],
        "moduleDirectories": [
          "node_modules"
        ]
      }

我将我的根.babelrc定义为: …

问题描述：
我为一个打字稿类编写了两个测试。这两个测试都通过了，所以 jest 成功地检索了测试文件。然后我使用 --coverage 选项，但似乎开玩笑没有在这里选择涵盖的文件。
这是我得到的输出：

api_jester    | PASS src/tests/repositories/user.test.ts
api_jester    |   User Repository
api_jester    |     ? it should return an empty array (18ms)
api_jester    |     ? should successfully create a user and return its data (7ms)
api_jester    | 
api_jester    | ----------|----------|----------|----------|----------|-------------------|
api_jester    | File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
api_jester    | ----------|----------|----------|----------|----------|-------------------|
api_jester    | All files |        0 |        0 |        0 |        0 |                   | …

标题几乎解释了我所面临的问题.我正在尝试测试React具有某种状态的组件,并尝试将我的商店提供给组件以获得它所需的内容.当我使用Jest运行组件的测试时,我收到以下错误:

ReferenceError: regeneratorRuntime is not defined

我已经通过了一些读数确定,这是造成babel-polyfill或者regenerator-runtime没有被正确适用于玩笑.但是,我已经尝试安装这两个软件包并重新运行而不会改变结果.在阅读了Jest Github问题页面(删除自动包含babel-polyfill#2755)之后,我发现babel-polyfillJest自版本19以来并未自动包含.我手动安装该软件包应该已经解决了问题,但它确实不.我已经包含了一些我认为相关的文件

.babelrc:

{
  "presets": ["es2015", "react", "stage-2"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }]
        }]
      ]
    }
  }
}

jest.config:

{
    "transform": {
        "^.+\\.(js|jsx)$": "<rootDir>/node_modules/webpack-babel-jest",
        ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
        ".*": "babel-jest"
    },
    "moduleNameMapper": {
        "\\.(jpg|jpeg|css|scss|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/__mocks__/fileMock.js",
        ".*\\.(vue)$": "vue/dist/vue.js"
    },
    "testPathIgnorePatterns": ["type_parser.spec.js", 
                               "<rootDir>/__tests__/__mocks__/",
                               "__tests__/unit/core/util/type_parser.js",
                               "__tests__/GitlabLoader.test.js"
                               ]
}

package.json:

{
  "name": "my_project",
  "version": "0.2.0", …

使用 Jest 对一些 NodeJS 函数进行一些测试，但它不喜欢import语句，例如import DatabaseController from '../util/database-controller'.

我做了一些阅读，人们建议安装babel-jest和更新我的配置（如下），但我没有任何运气。我错过了什么？据我所知，它不理解import陈述，因为它是一es6件事......

我的笑话部分package.json：

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },

我正在尝试将 Jest ( ts-jest) 集成到我使用styled-components/macros. 但由于某种原因，Jest 抱怨以下错误：

ts-jest[versions] (WARN) Version 4.0.2 of typescript installed has not been tested with ts-jest. If you\'re experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.\n FAIL  packages/xx/src/components/button.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: macro_1.default.button is not a function\n\n      2 |\n      3 | export const Context = {\n    > 4 |   Root: styled.button``,\n        |                      ^\n      5 | …

我有以下行在浏览器中正确执行

eval(Babel.transform(template, { presets: ['react'] }).code);

但是当我运行玩笑测试时，我得到了 ReferenceError: React is not defined

我错过了什么？

更多信息：在测试文件中，我有以下内容：

const wrapper = shallow(<MyComponent/>);
const instance = wrapper.instance();
instance.componentFunction(...)

然后 componentFunction 具有它从测试文件中获取的内容的eval(Babel.transform(template, { presets: ['react'] }).code);行，template可以是类似的内容<span>...</span>

如果需要更多详细信息，请告诉我

在某些情况下，我很难使用 JEST 来运行我得到的测试

测试套件运行失败

...node_modules\p-retry\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import retry from 'retry';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import pRetry from 'p-retry';
        | ^
      2 |
      3 | export function Retry(tries: number) {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/common/Retry.ts:1:1)

同时，我的 webpack 构建与 typescript 和 babel 配合得很好。我尝试了很多东西（见下文以使其工作，但到目前为止没有成功 - 并且还没有真正能够理解发生了什么。从我的角度来看 - 尽管转译的东西到目前为止对我来说是一个黑色区域我尝试让 Jest 使用 ESModules 并提供代码，并尝试提供 commonJS 模块代码。

因此，我正在寻找其他选择和方法来进一步调查。特别是一件事让我感到奇怪：错误中的 Retry.ts 文件是我的文件之一，它导入 pRetry （以 ESModule 风格编写的 node_module ），它在其代码中从“retry”（另一个节点模块）导入重试以 commonJS 风格编写）从错误的第一行开始。

所以在我看来，pRetry 并不是从它的 ESModule 代码转换而来（pRetry 的源代码以 import retry from 'retry'; 开始），而只是包装在一些 …

将 CRA 更新至版本 5 后。

运行时npm test我看到以下错误：

Determining test suites to run...\n\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: babelJest.createTransformer is not a function\n\n      at Object.<anonymous> (node_modules/react-app-rewired/scripts/utils/babelTransform.js:16:28)\n      at node_modules/@jest/transform/build/ScriptTransformer.js:382:73\n          at Array.map (<anonymous>)\n

我已经检查过，有一个针对 babel-jest 解决此问题的修复程序：\n https://github.com/facebook/jest/issues/11444并且已在版本上发布28

CRA 取决于版本^27.4.2。

有没有人遇到过这个问题，或者有一个不涉及覆盖 CRA 中指定的 babel-jest 版本的正确解决方案的想法？