我尝试为使用mock API数据的React页面运行异步测试，但只要您将Jest超时设置为，它们就会挂起。我使用mock service worker（msw）来提供页面数据，它在dev和Redux中工作得很好。我遵循Redux团队的建议，不要模仿Redux，这样你就可以做适当的集成测试，看看页面实际上是如何运行的。Redux操作调用fetch，然后由msw填充，然后将数据填充到Redux存储中。然而，测试总是在等待WaitFor时超时。

test('displays position page', async () => {
    const container = document.createElement('div'); 
    const root = createRoot(container!);
    root.render(
    <ReduxProvider store={store} key="redux">
        <MemoryRouter initialEntries={['/']}>
            <PositionPage />
        </MemoryRouter>
    </ReduxProvider>
    )
  await waitFor(async () => {
    expect(await screen.getByText("XXXX", { exact: false })).toBeInTheDocument();
  })
});

对于msw，我有setupTests.ts

import '@testing-library/jest-dom';
import { getServer } from './core/mocks/server';

const server = getServer();
beforeAll(() => {
  server.listen()
});
afterEach(() => {
  server.resetHandlers()
})
afterAll(() => {
  server.close()
})

在server.ts中：

import { setupServer } from 'msw/node';
import type { SetupServer } from 'msw/node';
import { handlers } from './handlers';

// eslint-disable-next-line @typescript-eslint/init-declarations
let server: SetupServer | undefined;
export const getServer = (): SetupServer => {
  if (!server) {
    server = setupServer(...handlers);
  }
  return server;
};

我做错了什么？是因为Redux是这里真实的Redux而不是被嘲笑吗？有没有一种方法可以让这个工作，而不必失去所有的“真实的世界”的测试元素，使用适当的Redux给你？