有没有办法在 MockedProvider - Apollo Client 中模拟重新获取？

Question

这是我使用 MockedProvider 的方式。如何在模拟数组中模拟重新获取？

const mocks = [{
        request: {
            query: GET_USERS_BY_FACILITY,
            variables: {
                facility: 300
            }
        },
        result: {
            data: {
                GetUsersByFacility: [{
                    nuId: 'Q916983',
                    userName: faker.internet.userName(),
                    profileKey: 'testKey',
                    profileValue: 'testValue',
                    __typename: 'FacilityUser'
                }]
            }
        },
        refetch: () => {
            return {
                data: {
                    GetUsersByFacility: [{
                        nuId: 'Q916983',
                        userName: faker.internet.userName(),
                        profileKey: 'testKey',
                        profileValue: 'testValue',
                        __typename: 'FacilityUser'
                    }]
                }
            }
        }
    }

该测试用例在触发删除事件时调用 refetch 函数。

 it('should be able to click on delete user', async () => {
        const {getByTestId} = render(
            <MockedProvider mocks={mocks}>
                <Users selectedFacility={300}/>
            </MockedProvider>)

        await wait(0)
        fireEvent.click(getByTestId('btnDelete'))
    })

我一直在尝试不同的方法，似乎没有一个有效。我收到错误消息TypeError: Cannot read property 'refetch' of undefined。

非常感谢，希望得到答复。

问候，--拉贾尼

Answer 1

也许现在回答有点晚了，但是如果你还没有得到答案，可以参考我的解决方法。

请注意，这可能不是正确的答案。

• 您可以在react-apollo 文档中找到此代码

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: () => {
      // do something, such as recording that this function has been called
      // ...
      return {
        data: {
          dog: { id: '1', name: 'Buck', breed: 'bulldog' },
        },
      }
    },
  },
];

• 我根据这个短语制作我的重新获取测试代码// do something, such as recording that this function has been called

这是我的模拟示例。

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: () => {
      // do something, such as recording that this function has been called
      // ...
      return {
        data: {
          dog: { id: '1', name: 'Buck', breed: 'bulldog' },
        },
      }
    },
  },
];

• 单击按钮时该组件会重新获取数据。我按照这个顺序设计了我的测试代码
  1. 当第一次渲染时，它会获取模拟数据。
     => 在上面的代码中，queryCalled是false这样，它重新分配queryCalled为true并返回“第一次获取的”模拟数据，
  2. 当点击事件发生时，也会发生重新获取。
     => 按照同样的原理，模拟数据返回“重新获取的”模拟数据。

我的测试代码示例在这里

let queryCalled = false

const testingData = (value) => ({
  data: {....}
})

const TESTING_MOCK = {
  request: {
    query: TESTING_QUERY,
    variables: { some: "variables" },
  },
  result: () => {
    if (queryCalled) return testingData("refetched");
    else {
      queryCalled = true;
      return testingData("first fetched");
    }
  },
};

如果您还有其他建议，请告诉我！