Closed
Description
Environment
| Name | Version |
|---|---|
| msw | 0.27.1 |
| node | v12.20.1 |
| OS | MacOS |
Request handlers
// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { rest } from 'msw'
const server = setupServer(
graphql.query("Roles", (_req, res, ctx) => res(ctx.data({}))) // return empty object by default
)
server.listen()Test code
Actual request
// apollo useQuery hook
export const ROLES_QUERY = gql`
query Roles {
roles
}
`
const { data, error } = useQuery(ROLES_QUERY)
console.log('data', data)test code that fails (using @testing-library/react)
test("some roles query test", () => {
server.use(
graphql.query("Roles", (req, res, ctx) =>
res(
ctx.data({
roles: ["roleA", "roleB"],
}),
),
),
)
render(<HeaderMenu />)
// logs data: {}test code that succeeds
test("some roles query test", async () => {
server.use(
graphql.query("Roles", (req, res, ctx) =>
res(
ctx.data({
roles: ["roleA", "roleB"],
}),
),
),
)
// only difference here
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
await wait(0)
// only difference here
render(<HeaderMenu />)
// logs data: { roles: ["roleA", "roleB"]}Current behavior
apollo query returns data: {}
Expected behavior
apollo query to return data: { roles: ["roleA", "roleB"] }
Thoughts + Question
This was a head-scratcher to figure out. Especially as server.printHandlers() run directly after server.use() did always indicate the override as succeeding.
Is there a more elegant way to solve this do you think? Or have a better idea of the root cause of why this wait(0) is needed? Has anyone else has run into issues like this?