test: verify email component #4019
Conversation
|
🤖 Hasura Change Summary compared a subset of table metadata including permissions: Tracked Tables (1)Updated Tables (3)
|
| describe("when the VerifySubmissionEmail component renders", () => { | ||
| it("displays the email address input", () => { | ||
| setup(<VerifySubmissionEmail params={{ sessionId: "1" }} />); | ||
|
|
||
| expect( | ||
| screen.queryByText("Verify your submission email address"), |
There was a problem hiding this comment.
random: found a nice document of dos/donts for react-testing-library: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence
I knew there was one way or another to use queryBy but always forget which way round it is!
| @@ -13,10 +14,16 @@ import { vi } from "vitest"; | |||
| */ | |||
| const mockFade = vi.fn(({ children }: FadeProps) => <div>{children}</div>); | |||
|
|
|||
| vi.mock("@mui/material/Fade", () => ({ | |||
| vi.doMock("@mui/material/Fade", () => ({ | |||
There was a problem hiding this comment.
Errored after I added in the msw beforeEach stuff, so found this solution from https://vitest.dev/api/vi.html#vi-mock
vi.mock is hoisted (in other words, moved) to top of the file. It means that whenever you write it (be it inside beforeEach or test), it will actually be called before that.
This also means that you cannot use any variables inside the factory that are defined outside the factory.
If you need to use variables inside the factory, try vi.doMock. It works the same way but isn't hoisted. Beware that it only mocks subsequent imports.
The long-awaited filling in of the
test.todos for the verify submission email component!I have added Mock Service Worker as a package (recommended by react-testing-library as the best way to mock API calls, and something I have worked with before). I'm using here to intercept calls to
/download-application-fileso I can test behaviour in an error state, and check that files are downloaded without having to do complicated download mocks.