Skip to main content
Version: Next

wasp/client/test

Helpers for testing your client code with Vitest and React Testing Library. The helper for configuring Vitest is in wasp/test.

Functions​

mockServer()​

mockServer(): MockServer

Sets up a mock server for the current test file, and returns helpers for mocking your Queries and APIs.

Call it once, at the top level of each test file that uses the helpers, not inside a test case. It starts an MSW server before the file's tests, resets the mocks after each test, and closes the server after the file's tests.

Returns​

MockServer

Example​

import { screen } from "@testing-library/react";
import { expect, test } from "vitest";
import { HttpMethod } from "wasp/client";
import { getTasks } from "wasp/client/operations";
import { mockServer, renderInContext } from "wasp/client/test";
import { TaskList } from "./TaskList";

const { mockQuery, mockApi } = mockServer();

test("shows the tasks", async () => {
  mockQuery(getTasks, [
    { id: 1, description: "Buy milk", isDone: true, userId: 1 },
  ]);
  mockApi({ method: HttpMethod.Get, path: "/stats" }, { doneTasks: 3 });

  renderInContext(<TaskList />);

  await screen.findByText("Buy milk");
  expect(screen.getByRole("checkbox")).toBeChecked();
});

renderInContext()​

renderInContext(ui, options?): RenderResult

Renders a React element inside the providers that Wasp's client code needs: react-query's QueryClientProvider and React Router's BrowserRouter.

Use it instead of Testing Library's render in your component tests, so your components can use useQuery, useAction, and links. Each call gets its own query client, so tests don't share cached data.

It wraps the element in WaspTestWrapper.

Parameters​

ui​

ReactElement

options?​

RenderOptions

Returns​

RenderResult

Example​

import { screen } from "@testing-library/react";
import { expect, test } from "vitest";
import { renderInContext } from "wasp/client/test";
import { TasksHeader } from "./TasksHeader";

test("links back home", () => {
  renderInContext(<TasksHeader />);

  expect(screen.getByRole("link", { name: "Back home" })).toBeInTheDocument();
});

Components​

<WaspTestWrapper>​

WaspTestWrapper(props): ReactNode

Wraps its children in the same providers as renderInContext. Pass it as the wrapper option when you call Testing Library's render or renderHook yourself.

Parameters​

props​
children​

ReactNode

Returns​

ReactNode

Example​

import { renderHook } from "@testing-library/react";
import { WaspTestWrapper } from "wasp/client/test";
import { useTaskCount } from "./useTaskCount";

const { result } = renderHook(() => useTaskCount(), {
  wrapper: WaspTestWrapper,
});

Referenced Types​

MockApi​

MockApi = (route, mockData) => void

Mocks the response of one of your app's custom APIs.

Parameters​

route​

Route

The HTTP method and path of the API.

mockData​

unknown

The data the API should respond with, as JSON.

Returns​

void

MockQuery​

MockQuery = <Input, Output, MockOutput>(query, mockData) => void

Mocks the result of a Wasp Query.

Wasp registers an MSW request handler that responds to all of the Query's requests with mockData, whatever their input.

Type Parameters​

Input​

Input

Output​

Output

MockOutput​

MockOutput extends Output

Parameters​

query​

Query<Input, Output>

The Query to mock: one from wasp/client/operations, or getMe.

mockData​

MockOutput

The data the Query should return. It must match the Query's output type.

Returns​

void

MockServer​

MockServer = object

The helpers that mockServer returns.

Properties​

mockApi​

mockApi: MockApi

mockQuery​

mockQuery: MockQuery

server​

server: SetupServer

The underlying MSW server, for mocking requests that mockQuery and mockApi don't cover.

RenderOptions​

RenderOptions = object

The options of React Testing Library's render function, except wrapper.

This is a simplified version of Testing Library's RenderOptions type; see its docs for all the options.

Properties​

baseElement?​

optional baseElement?: HTMLElement

The element the queries are bound to. Defaults to container if you specify it, or to document.body otherwise.

container?​

optional container?: HTMLElement

The DOM element to render into. Defaults to a new div in baseElement.

hydrate?​

optional hydrate?: boolean

Whether to hydrate the container instead of rendering into it.

RenderResult​

RenderResult = object

The result of React Testing Library's render function.

This is a simplified version of Testing Library's RenderResult type; it also contains all of Testing Library's queries (like getByText), bound to baseElement.

Properties​

baseElement​

baseElement: HTMLElement

The element the queries are bound to.

container​

container: HTMLElement

The DOM element your component was rendered into.

Methods​

asFragment()​

asFragment(): DocumentFragment

Returns a DocumentFragment of the rendered component.

Returns​

DocumentFragment

rerender()​

rerender(ui): void

Renders a new element into the same container, e.g. to update props.

Parameters​
ui​

ReactElement

Returns​

void

unmount()​

unmount(): void

Unmounts the rendered component.

Returns​

void

SetupServer​

SetupServer = object

An MSW server running in Node.js.

This is a simplified version of MSW's SetupServer type; see MSW's docs for all its members.

Methods​

resetHandlers()​

resetHandlers(...nextHandlers): void

Resets the request handlers to the initial ones, removing those added with use, or to nextHandlers if you pass any.

Parameters​
nextHandlers​

...unknown[]

Returns​

void

use()​

use(...handlers): void

Adds request handlers, which take precedence over the existing ones.

Parameters​
handlers​

...unknown[]

Returns​

void