如何在"fireEvent"之前从@testing库/反应中重新获取模拟提供者？

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，然后只有新的状态可供您使用。

在这里，如果您没有任何微调器或加载程序，您可以看到它们正在使用Promise解析。

你也可以参考这个。并且，尝试使用user-event。这是推荐的用户交互方式。

而且，您可以使用msw直接模拟api请求，而不是使用MockedProvider。我一直在用同样的，真的很高兴。