标签: babel-jest

似乎无法用 Jest 进行测试，因为我正在使用样式组件。有人找到解决这个问题的方法吗？

我将我的“StyledComponents.js”组件放在一个单独的文件中，并根据需要将它们导入到我的页面中..ala。

从“StyledComponents”导入{页脚、页眉、LeftNav}；

 PASS  src/app/components/Products/__tests__/Avatar.test.js\n FAIL  src/app/components/Products/__tests__/product-snapshot-test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read property \'div\' of undefined\n\n\n      at Object.<anonymous> (src/app/components/Products/styledComponents.js:9:148)\n      at Object.<anonymous> (src/app/components/Products/ProductsItem.js:3:41)\n      at Object.<anonymous> (src/app/components/Products/index.js:7:50)\n      at Object.<anonymous> (src/app/components/Products/__tests__/product-snapshot-test.js:5:14)\n

包含来自 styled.js 文件（ala：styled-components）的组件的导入文件部分令人窒息。

// @flow\nimport React from \'react\';\nimport {\n  Products,\n  ProductItem\n} from \'./styledComponents\';\n

基本上，它说“样式”是未定义的。然而，在我的文件中，我有：

import styled from \'styled-components\';\n\nexport const ProductContainer = styled.div`\n  border-radius: 5px;\n  overflow: hidden;\n`;\n\netc.... \n

更新为包括 babelrc 和 package.json 文件

巴贝尔库

{\n  "presets": ["es2015", …

我有以下问题，我不知道是否可以使用 Jest + 快照功能获得结果。

我有一个 React 组件，我正在使用 Jest 来测试它。

我希望快照包含css样式而不是className。

目前我的快照是这样的：

<div id="main" className="myClass"></div>

我想让它像：

<div id="main" style={Object {"float": "right"}}></div>

我的应用程序使用webpack ( sass-loader ) 来解析scss，所以那里没有问题。

有可能得到这种结果吗？

谢谢

TLDR：我如何配置jest，以便它使用babel编译测试文件，并在需要的所有文件globalSetup和globalTeardown？

我一直在努力配置jest和babel. 似乎当我运行我的测试时babel无法加载配置文件，或者它根本没有运行。

在 package.json 中：

{
  "scripts": {
    "start": "babel-node src/index.js",
    "test": "jest src/tests/*.test.js",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-rc.1",
    "@babel/core": "^7.0.0-rc.1",
    "@babel/node": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-jest": "^23.4.2",
    "jest": "^23.5.0",
  }
}

在 babel.config.js 中：

module.exports = (api) => {
    if (api) api.cache(true);
    const presets = ['@babel/preset-env'];
    const plugins = [];
    return {
        presets,
        plugins,
    };
};

在 jest.config.js 中：

module.exports = { …

I have written many components in vuetify that are reusable. I am using jest testing framework for unit testing. When I run 'npm run test', the test fails with 'SyntaxError: Unexpected identifier'.

All my babel config and jest config are in package.json file. When I create a spec file without any vuetify components, test works. But once I add vuetify, it distorts. I first used localValue from @vue/test-utils to consume vuetify. It didn't work. Then I used Vue.use(Vuetify) and still …

我对用 JSX 文件编写的 TSX 文件进行了测试，该文件因意外令牌而无法运行：

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".

我有另一个用 JSX 编写的测试，用于运行的 JSX 文件。我正在使用 React 测试库，但我认为这不是问题，因为文件导入的测试失败。

堆栈跟踪：

 export { default as add } from './add.js';
^^^^^^

SyntaxError: Unexpected token export

  1 | import React from 'react'; …

当我运行笑话测试时，绿色进度条和统计信息不会打印到控制台。

它只是打印RUNS path/to/my/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 …

npx create-react-app my-app运行后npm test我得到以下信息：

 PASS  src/App.test.js\n  \xe2\x9c\x93 renders learn react link (48ms)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        2.555s\nRan all test suites.\n\nWatch Usage: Press w to show more.\n

为什么需要2.5s运行整个套件，而只48ms运行测试？\n我怎样才能加快这个过程？\n谢谢！

更新：我正在运行这台计算机：

我想在 Jest 26.1.0 中使用 ES6 模块的导入/导出功能（因为我的整个项目都使用它）。

我为我的测试用例创建了一个名为的目录，testCases/其中包含一个math.mjs文件。现在我正在尝试将此文件导入math.test.js（对于 Jest）。每当我运行时npm run test，它都会引发以下错误。

>Details:

    /home/jatin/Downloads/Node.js/task-manager-app/TestCases/math.test.js:1
    import calc from "../src/math.mjs";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.556 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

我什至尝试根据文档和其他 GitHub 问题更改 Jest 配置，但到目前为止没有成功。

下面是我的 math.mjs 测试文件

  const calc = (total, tippercent) => {
    const …

我已经分叉了以下React Native 基础项目，并将其从 JavaScript 转换为 TypeScript。应用程序运行正常，但 Jest 测试失败并出现以下错误。我希望测试能够成功运行，并且 Jest 能够在必要时运行任何转换：

 C:\Users\brian-varley\Documents\Projects\react-native-base\node_modules\redux-flipper\node_modules\react-native-flipper\index.js:11
import {NativeModules, NativeEventEmitter} from 'react-native';
^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (node_modules/redux-flipper/lib/index.js:3:32)

错误原因似乎来自包import内的这条语句react-native-flipper：

import {NativeModules, NativeEventEmitter} from 'react-native';

我在这里尝试了 StackOverflow 的解决方案，建议babel-jest在 jest.config.js 文件中用作转换器，但无济于事 - /sf/answers/4495653921/。我也浏览了这个线程，但没有找到解决方案 - https://github.com/facebook/jest/issues/9292

问题：

如何配置 Jest 来转换包含无效语法的模块？

环境

"react-native": "0.63.2",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.59.0",
"babel-jest": "^25.1.0",
"ts-jest": "^26.5.3",

配置代码示例：

笑话.config.js：

module.exports =  {
    preset: "react-native",
    transform: {
      "^.+\\.tsx?$": …