如何在与create-react-app上的react-script test相同的配置下使jest运行? [英] How can I make jest run with the same config as react-script test on a create-react-app?

问题描述

我知道我可以运行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.

    或者，可以通过类似于

    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运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！