userEvent.click() -> 使用测试库/react 测试 Apollo 客户端时“不再有模拟查询响应”

Question

describe('<UserTable />', () => {
    const gqlMock: Array<MockedResponse> = [
        {
            request: {
                query: QUERY_USER_LIST
            },
            result: {
                data: {
                    getUserList: [
                        {
                            userId: 'testuser',
                            userName: 'testname',
                            ...
                        }
                    ]
                }
            }
        },
        {
            request: {
                query: VALIDATE_TOKEN
            },
            result: {
                data: {
                    validateAccessToken: true
                }
            }
        },
    ]

    beforeEach(() => {
        render(
            <MockedProvider mock={gqlMock} addTypename={false}>
                <MemoryRouter>
                    <Routes>
                        <Route path={'/'} element={<UserTable />} />
                    </Routes>
                </MemoryRouter>
            </MockedProvider>
        )
    })

    it('user display test', async () => {
        await waitFor(() => {
            const testuser = screen.getByText('testuser')
            expect(testuser).toBeInTheDocument()
        })
    })

    it('add popup test', async () => {
        await act(async () => {
            const addButton = screen.getByText('Add new user')
            expect(addButton).toBeInTheDocument()
            await userEvent.click(addButton)
        })

        await waitFor(() => {
            const popupTitle = screen.getByText(/This dialog/i)
            expect(popupTitle).toBeInTheDocument()
        })
    })
})

第一次测试没有问题，但第二次测试却出现错误

No more mocked responses for the query: query validateAccessToken {
  validateAccessToken
}
Expected variables: {}

This typically indicates a configuration error in your mocks setup, usually due to a typo or mismatched variable.

我的系统会在每个请求时检查 jwt 令牌。它是使用 async-await 来检查服务器上的令牌并在检查令牌后执行其他工作的。

问题是，当使用单击事件时，它总是显示空预期变量的错误

userEvent.click()

为什么每次带有点击事件的测试都会发生这种情况？

Answer 1

您表示：

我的系统在每个请求时检查 jwt 令牌

您是否有可能在第二次测试中发出多个请求？

每次查询触发（包括重新获取）时，您都需要模拟请求和结果。

Answer 2

Apollo 中似乎存在一个错误，如果您的组件再次请求相同的模拟，则它找不到它。简单的解决方案是再次重复模拟。

beforeEach(() => {
    render(
        <MockedProvider mock={[...gqlMock, ...gqlMock]} addTypename={false}>
            <MemoryRouter>
                <Routes>
                    <Route path={'/'} element={<UserTable />} />
                </Routes>
            </MemoryRouter>
        </MockedProvider>
    )
})