如何在@testing-library/react 的"fireEvent" 之前重新获取MockProvider？

Question

我试图在这里执行一个测试，基本上应该在使用 graphQL 返回的模拟数据单击按钮后执行一些操作

<MockedProvider
      mocks={mocks}>
      <button data-testid="my-button">Execute Actions using mocked Data</button>
    </MockedProvider>

fireEvent.click(myButton);

当它触发按钮时，从 graphQL 接收到的数据为空。这是我的模拟：

return {
    request: {
      query: QUERY,
      variables: {
        marketCodes: '',
        years: '',
        minDate: null,
        maxDate: null,
        limit: 100
      }
    },
    result: { data },
    newData: jest.fn(() => ({ data }))
  };

有人可以帮我吗？

Answer 1

fireEvent.click(myButton);
await waitForElementToBeRemoved(() => screen.queryByTestId("loader"));
// now you can expect the mocked data

在执行任何导致某些异步功能的操作后，您需要等待微调器离开 dom，然后您将只能使用新状态。

Here，如果你没有任何微调器或加载器，你可以看到他们正在使用 Promise resolve。

可以参考this too. And, try using user-event。这是推荐的用户交互方式。

而且，您可以使用 msw 直接模拟 api 请求，而不是使用 MockedProvider。我一直在使用它并且非常满意。

如何在@testing-library/react 的"fireEvent" 之前重新获取MockProvider？

How to re-fetch MockProvider before a "fireEvent" from @testing-library/react?

reactjs

graphql

react-testing-library

react-hooks