reactjs - 如何让 jest 使用与 create-react-app 上的 react-script 测试相同的配置运行？

Question

我知道我可以跑 npm test运行 react-script test它工作正常，它成功地运行了测试。但我有兴趣弄清楚如何运行 jest直接用同样的配置react-script使用。希望不必复制配置或弹出应用程序。我开始阅读react-scripts的源代码但到目前为止我无法弄清楚。
想要这个的原因是:

我的 CRA 项目是一个更大项目的一部分，我可以运行 jest在顶层并运行所有测试。

在 WebStorm 中，我可以利用 Jest 集成，其中包括:

显示运行时通过或失败的测试列表。

能够运行单独的测试。

做代码覆盖。

如果我运行 jest在我的 CRA 应用程序上，我收到此错误:

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 的好处。我明白，如果我弹射出来，我几乎可以为所欲为。

Answer 1

create-react-app Jest 配置不应该在没有弹出的情况下可用。 react-script test使用动态生成的配置以编程方式运行 Jest。它被导出到 eject 上的静态配置文件.
问题是弹出仍然不允许以与 Jest CLI 相同的方式运行测试，因为在弹出的项目中，Jest 仍然通过 scripts/test.js 以编程方式运行。 .脚本负责设置CRA environment variables ，它们应该额外提供给 Jest CLI。 This应该在 jest.config.js 或 globalSetup 中评估文件:

process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
require('react-scripts/config/env');

喷射
考虑到未弹出的项目不会提供生成的项目(如脚手架)所固有的任何好处，因此最好在需要任何自定义时立即弹出。
弹出项目的配置
如果需要保持项目不被弹出，可以将其克隆并弹出，然后将 Jest 配置( config/jest/*.* 中的 jest 和 package.json 条目)转移到未弹出的项目中。这可以通过 Git 分支来实现。
解决方法
或者，它可以通过依赖于 react-scripts internals 的黑客来检索生成的配置，类似于 CRA 如何做到这一点。 :
Jest 配置文件

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
);