0
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()
        })
    })
})

First test have no problem, but second test shows error

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.

My system checks jwt token at every request. it is made with async-await to check token at server and do other jobs after tokens checked.

problem is that it always shows error with empty expected variables when click event is used

userEvent.click()

why this happens for every tests with click event?

3 Answers 3

0

You indicate:

My system checks jwt token at every request

Is it possible that you're issuing multiple requests in your second test?

You need to a mocked request and result for every time your query fires, including refetches.

0

There seems to be a bug in Apollo, where if your component requests the same mock again it doesn't find it. The simple solution is to repeat the mock again.

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

Normally this happens when there is a mismatch between your variables or the result you are returning. Make sure the variables and the result being returned are the same with the query 100%.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.