reactjs - 使用 MockedProvider 测试时使用 Apollo 突变更新存储

Question

我正在尝试测试在运行突变后应使用新数据更新的组件。我在下面发布了示例代码。你可以找到它on GitHub as runnable repository as well .

不幸的是，我没有找到一种方法来在突变之后实际更新 MockedProvider 的存储数据。当您运行测试时，您可以看到正在执行突变，然后组件被渲染。但是由于突变没有做任何事情，所以没有添加新的待办事项。

谁能告诉我在使用 MockedProvider 时如何使用突变更改数据？

测试查询和变异:

const TODOS_QUERY = gql`
  query todos {
    todos {
      title
    }
  }
`

const ADD_TODO_MUTATION = gql`
  mutation addTodo($title: String!) {
    addTodo(title: $title)
  }
`;

测试组件:

const Component = () => (
  <Query query={TODOS_QUERY}>
    {
      ({ data }) => {
        console.log('render'); return (
        <Mutation mutation={ADD_TODO_MUTATION}>
          {
            addTodo => (
              <div>
                <button onClick={() => { console.log('addTodo'); addTodo({ variables: { title: 'My new todo' } }) }}>
                  Click me to add a todo!
                </button>

                {
                  (data.todos || []).map(({ title }, index) => (
                    <div key={index} className="todo-item">
                      {title}
                    </div>
                  ))
                }
              </div>
            )
          }
        </Mutation>
      )}
    }
  </Query>
);

测试实现。这会使用 Enzyme 挂载组件，模拟单击按钮以执行突变并等待组件再次呈现。

it('renders without crashing', async () => {
  const mocks = [
    {
      request: {
        query: TODOS_QUERY,
      },
      result: {
        data: {
          todos: [
            {
              title: 'An old todo',
            },
          ],
        },
      },
    },
    {
      request: {
        query: ADD_TODO_MUTATION,
        variables: {
          title: 'My new todo',
        },
      },
      result: {
        data: {
          addTodo: null,
        },
      },
    },
  ];

  const wrapper = mount(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Component />
    </MockedProvider>
  );

  await wait(100);
  wrapper.update();

  console.log(wrapper.debug())

  expect(wrapper.contains('An old todo')).toBe(true);
  expect(wrapper.contains('My new todo')).toBe(false);
  wrapper.find('button').simulate('click');

  await wait(100);
  wrapper.update();

  console.log(wrapper.debug())

  expect(wrapper.contains('An old todo')).toBe(true);
  expect(wrapper.contains('My new todo')).toBe(true);
});

非常感谢您的帮助!

Answer 1

MockedProvider 接受一个 cache Prop ，您可以将自己的缓存传递给它(与初始化 ApolloClient 时使用的缓存相同)。这应该可以让您在测试中自动更新缓存。

您可能需要删除 addTypeName=false 才能使其正常工作，并提供包含 __typename 的模拟。

https://www.apollographql.com/docs/react/api/react-testing/