如何使用 create-react-app 在 Jest 测试中忽略生成的 Relay 查询文件？

Posted 2023-03-08

【中文标题】如何使用 create-react-app 在 Jest 测试中忽略生成的 Relay 查询文件？

【英文标题】：How to ignore generated Relay query files in Jest tests using create-react-app?

【发布时间】：2020-02-02 01:15:04

【问题描述】：

我使用 create-react-app 创建了一个 React 应用并添加了 Relay。我想用 Jest 测试我的组件，但是 Relay 编译器会生成 Jest 读取为测试文件的文件。我不能忽略这些文件，因为我正在使用 create-react-app。

例如，测试可能如下所示：

// src/components/MyComponent/__tests__/MyComponent.test.js
import React from 'react';
import graphql from 'babel-plugin-relay/macro';
import  QueryRenderer  from 'react-relay';
import renderer from 'react-test-renderer';
import  MockPayloadGenerator, createMockEnvironment  from 'relay-test-utils';
import MyComponent from '../MyComponent';

const query = graphql`
  query MyComponentQuery @relay_test_operation 
    myComponent: node(id: "test-id") 
      ...MyComponent_myComponent
    
  
`;

const rootRender = ( props ) => <MyComponent myComponent=props.myComponent />;

it('renders without crashing', () => 
  const environment = createMockEnvironment();

  const component = renderer.create(
    <QueryRenderer
      environment=environment
      query=query
      variables=
      render=rootRender
    />
  );
  environment.mock.resolveMostRecentOperation((operation) =>
    MockPayloadGenerator.generate(operation));

  expect(component.toJSON()).toMatchSnapshot();
);

relay-compiler 将为查询生成一个文件src/components/MyComponent/__tests__/__generated__/MyComponentQuery.graphql.js。

运行测试时，我得到：

FAIL src/components/MyComponent/__tests__/__generated__/MyComponentQuery.graphql.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

如何让 Jest 忽略生成的查询文件？有没有办法在不从 create-react-app 中弹出的情况下做到这一点？

【参考方案1】：

尝试将此添加到您的 package.json 中

    ...,
    "jest": 
        "testPathIgnorePatterns": [
            ".graphql.js"
        ]
    ,
    ...

【讨论】：

create-react-app 不支持testPathIgnorePatterns

哦，好的。也许你可以重命名你的 __tests__ 文件夹。

Jest 将查找具有以下任何流行命名约定的任何测试文件：__tests__ 文件夹中带有 .js 后缀的文件。带有 .test.js 后缀的文件。带有 .spec.js 后缀的文件。