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

Question

我知道我可以运行npm test，它运行react-script test，它可以运行，它成功运行了测试。但我有兴趣弄清楚如何使用react-script 使用的相同配置直接运行jest。希望不必复制配置或弹出应用程序。我开始阅读react-scripts的源代码，但一直没搞明白。

想要这个的原因是：

• 我的 CRA 项目是一个更大项目的一部分，我可以在顶层运行 jest 并运行所有测试。
• 在 WebStorm 中，我可以利用 Jest 集成，其中包括：
  • 在运行时显示通过或失败的测试列表。
  • 能够运行单独的测试。
  • 进行代码覆盖。

如果我在我的 CRA 应用上运行 jest，我会收到以下错误：

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 配置（package.json 中的config/jest/*.* 和 jest 条目）转移到未弹出的项目中。这可以通过 Git 分支来实现。

解决方法

或者，可以通过依赖react-scripts internals 的 hack 来检索生成的配置，类似于 CRA 的方式：

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