如何在与create-react-app上的react-script test相同的配置下使jest运行?

本文介绍了如何在与create-react-app上的react-script test相同的配置下使jest运行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道我可以运行npm test，而react-script test可以运行，并且可以成功运行测试.但是我有兴趣弄清楚如何直接使用react-script相同的配置直接运行jest.希望不必复制配置或退出应用程序.我开始阅读react-scripts的源代码，但到目前为止我仍无法弄清.

I know I can run npm test which runs react-script test and it works, it successfully run the tests. But I'm interested in figuring out how to run jest directly with the same configuration react-script uses. Hopefully without having to replicate the configuration or ejecting the app. I started reading the source code of react-scripts but so far I couldn't figure it out.

想要这个的原因是:

我的CRA项目是一个更大项目的一部分，我可以在顶层运行jest并运行所有测试.
在WebStorm中，我可以利用Jest集成，其中包括:
- 在运行时显示通过或失败的测试的列表.
- 能够运行单独的测试.
- 进行代码覆盖.
- My CRA project is part of a bigger project, and I could just run jest on the top level and run all tests.
- In WebStorm, I can take advantage of the Jest integration, which includes:
  - Showing the list of tests that pass or fail, as they run.
  - Being able to run individual tests.
  - Doing code coverage.
  如果我在CRA应用程序上运行jest，则会收到此错误:
  If I run jest on my CRA app, I get this error:
```
PS C:\Users\pupeno\Documents\Flexpoint Tech\js\exp7\frontend> jest
 FAIL  src/App.test.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".

    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:

    SyntaxError: C:\Users\pupeno\Documents\Flexpoint Tech\js\exp7\frontend\src\App.test.tsx: Unexpected token (6:29)

      4 | 
      5 | test("renders Facebook link", () => {
    > 6 |   const {getByText} = render(<App/>)
        |                              ^
      7 |   const linkElement = getByText(/Loading.../i)
      8 |   expect(linkElement).toBeInTheDocument()
      9 | })

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/error.js:39:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1174:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:541:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:521:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:312:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:264:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:212:21)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.234s
Ran all test suites.
```
  为了不失去CRA的好处，我正在尝试不退出而执行此操作.我了解，如果我退出，我几乎可以做任何我想做的事.
  I'm trying to do this without ejecting, to not lose the benefits of CRA. I understand that if I eject I can do pretty much whatever I want.
  推荐答案
  create-react-app不应该在没有弹出的情况下进行Jest配置. react-script test以动态生成的配置以编程方式运行Jest.它已导出到eject上的静态配置文件.
  create-react-app Jest configuration isn't supposed to be available without ejection. react-script test programmatically runs Jest with dynamically generated configuration. It's exported to static configuration file on eject.
  问题在于弹出仍然不允许使用Jest CLI以相同的方式运行测试，因为在弹出的项目中，Jest仍然通过scripts/test.js以编程方式运行.该脚本负责设置CRA 环境变量，它们应该另外提供给Jest CLI. 此应在jest.config.js或globalSetup文件中进行评估:
  The problem is that ejection still doesn't allow to run tests the same way with Jest CLI because in ejected project, Jest still runs programmatically via scripts/test.js. The script is responsible for setting up CRA environment variables, they should be additionally supplied to Jest CLI. This should be evaluated in either jest.config.js or globalSetup file:
```
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
require('react-scripts/config/env');
```
  弹出
  考虑到未拒绝的项目不会提供生成的项目(如脚手架)所固有的任何好处，因此最好在需要进行任何自定义时立即退出.
  Eject
  Considering that unejected projects doesn't provide any benefits that are inherent to generated projects like scaffolding, it's preferable to eject as soon as any customization is needed.
  如果有必要使项目保持未弹出状态，则可以将其克隆并弹出，然后将Jest配置(package.json中的config/jest/*.*和jest条目)转移到未弹出的项目中.这可以通过Git分支来实现.
  If it's necessary to keep the project unejected, it can be cloned and ejected, then Jest configuration (config/jest/*.* and jest entry from package.json) is transferred to unejected project. This can be achieved with Git branches.
  或者，可以通过类似于 react-scripts内部构件:
  Alternatively, its possible to retrieve generated configuration similarly to how CRA does this via a hack that relies on react-scripts internals:
  jest.config.js
```
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
require('react-scripts/config/env');

const path = require('path');
const createJestConfig = require('react-scripts/scripts/utils/createJestConfig');

module.exports = createJestConfig(
  relativePath => require.resolve(path.join('react-scripts', relativePath)),
  __dirname, // given that Jest config is in project root
  false
);
```
  这篇关于如何在与create-react-app上的react-script test相同的配置下使jest运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

jest

如何在与create-react-app上的react-script test相同的配置下使jest运行?

问题描述

推荐答案

弹出

Eject