用jest测试中继[createFragmentContainer]？

在Jest中测试createFragmentContainer，你需要模拟GraphQL查询和响应，以及React组件的渲染。以下是一个简单的示例，展示了如何使用Jest和React Testing Library来测试createFragmentContainer。

步骤 1: 安装依赖

确保你已经安装了必要的依赖：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @apollo/client graphql

步骤 2: 创建一个简单的组件和容器

假设你有一个简单的组件和一个使用createFragmentContainer的容器：

// MyComponent.js
import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.someField}</div>;
};

export default MyComponent;

// MyContainer.js
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import MyComponent from './MyComponent';

const fragmentSpec = graphql`
  fragment MyContainer_data on SomeType {
    someField
  }
`;

const MyContainer = createFragmentContainer(MyComponent, fragmentSpec);

export default MyContainer;

步骤 3: 编写测试

现在你可以编写Jest测试来模拟GraphQL响应并验证组件的行为：

// MyContainer.test.js
import React from 'react';
import { render } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import MyContainer from './MyContainer';

const mocks = [
  {
    request: {
      query: require('./__generated__/MyContainer_data.graphql'), // 这是自动生成的GraphQL查询文件
      variables: {},
    },
    result: {
      data: {
        someType: {
          someField: 'Hello, World!',
        },
      },
    },
  },
];

describe('MyContainer', () => {
  it('should render the correct data', async () => {
    const { getByText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <MyContainer />
      </MockedProvider>
    );

    expect(getByText('Hello, World!')).toBeInTheDocument();
  });
});

注意事项

GraphQL查询文件：require('./__generated__/MyContainer_data.graphql') 这行代码引用了由Babel Relay插件自动生成的GraphQL查询文件。确保你的构建流程包含了Relay插件，并且生成了相应的文件。
MockedProvider：MockedProvider 是Apollo Client提供的一个组件，用于在测试环境中模拟GraphQL服务器响应。
addTypename：设置为false可以避免在测试中添加额外的__typename字段，这通常用于简化测试数据。