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

【问题标题】：How to ignore generated Relay query files in Jest tests using create-react-app?如何使用 create-react-app 在 Jest 测试中忽略生成的 Relay 查询文件？
【发布时间】：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 中弹出的情况下做到这一点？

【问题讨论】：

标签： javascript reactjs jestjs create-react-app relay

【解决方案1】：

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

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

【讨论】：

create-react-app 不支持testPathIgnorePatterns
哦，好的。也许你可以重命名你的 __tests__ 文件夹。
Jest 将查找具有以下任何流行命名约定的任何测试文件：__tests__ 文件夹中带有 .js 后缀的文件。带有 .test.js 后缀的文件。带有 .spec.js 后缀的文件。