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

Question

我知道我可以运行npm testwhichreact-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环境变量，它们应额外提供给 Jest CLI。这应该在 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内部的 hack 来检索生成的配置，类似于 CRA 如何做到这一点：

开玩笑的配置文件

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