时间戳

首页 > 解决方案 > 使用 Enzyme & MockProvider 期望/接收状态的正确方法

graphql - 使用 Enzyme & MockProvider 期望/接收状态的正确方法

问题描述

我正在测试一个使用 graphql useLazyQuery 的组件。MockProvider 由 Apollo 推荐的库 @apollo/react-testing 提供。我想测试某个消息是否根据查询返回的数据长度呈现。我的 html 元素结构如下：

<div className="message" data-id={props.data ? props.data.specials.length > 0 ? 'valid' : 'invalid' : ''}>
    ...children
</div>

我通读了 Apollo 的关于测试的文档，并写了一个这样的测试：

mock = {
    request: {
        query: GET_PRODUCTS,
        variables: { zip: "91001" }
    },
    result: {
        data: { 
            specials: [
                {
                    "_id": "5ecf28c459d3781a2e99738e",
                },
                {
                    "_id": "5ecf28c459d3781a2e99738f",
                }
            ] 
       }
   }
}

wrapper = mount(
    <MockedProvider mocks={[mock]} addTypename={false}>
        <Store.Provider value={[{ loading: false, zip: null }]}>
            <GetZipCode />
        </Store.Provider>
    </MockedProvider>
)

await wait(0)

expect(wrapper.find(message).prop('data-id')).toEqual('valid')

但是我发现测试不会根据我放置的模拟进行更新。我对此进行了测试，我将此值作为模拟传递：

mock = {
    request: {
        query: GET_PRODUCTS,
        variables: { zip: "32005" }
    },
    result: {
        data: { specials: [] }
    }
}

...after tests
expect(wrapper.find(message).prop('data-id')).toEqual('invalid')

对于这两个测试，预期值都是“”，这是我的 html 元素中的 data-id 道具的初始值。如果与“”相比，我将初始值设置为“无效”，那么我的测试中的预期值将输出“无效”。

似乎无论我通过我的模拟提供程序它都不会等待它通过。我也在使用 Apollo 推荐的等待包。

标签： graphqlenzymereact-apollo

解决方案

如果您想使用 jest 进行模拟，请使用以下方法

jest.mock("apollo-client", () => ({
  __esModule: true,
  useQuery: (query: any) => {
    //other mocks if needed
  },
  useLazyQuery: jest.fn().mockReturnValue([
    jest.fn(),
    {
      data: {
        yourProperties: "Add Here",
      },
      loading: false,
    },
  ]),
}));

如您所见，这种方法甚至返回要测试的代码中调用的模拟函数。

推荐阅读