Automated testing

This boilerplate comes with various testing setups to ensure your application's reliability and robustness.

Files related to this page

Unit & Integration Testing

Vitest is a solid, popular and battle tested solution built on top of the Vite ecosystem for unit and integration testing by millions of developers. One of its most notable advantages over Jest is performance, some of the teams reported up to 10-20x speed increase in running tests, even in watch mode.

Run pnpm run test to run the tests.

Refer to the Predefined Scripts file for more information on the available scripts.

End-to-End Testing

Playwright is used for end-to-end testing.

• Run pnpm run e2e:headless to run the tests in headless mode.
• Run pnpm run e2e:ui to run the tests in UI mode.

Refer to the Predefined Scripts file for more information on the available scripts.

Acceptance Testing

To write acceptance tests, we leverage Storybook's play function. This allows you to interact with your components and test various user flows within Storybook.

/*
 * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
 * to learn more about using the canvasElement to query the DOM
 */
export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
 
    const emailInput = canvas.getByLabelText("email", {
      selector: "input",
    });
 
    await userEvent.type(emailInput, "example-email@email.com", {
      delay: 100,
    });
 
    const passwordInput = canvas.getByLabelText("password", {
      selector: "input",
    });
 
    await userEvent.type(passwordInput, "ExamplePassword", {
      delay: 100,
    });
    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
    const submitButton = canvas.getByRole("button");
 
    await userEvent.click(submitButton);
  },
};

Smoke Testing

In this boilerplate, we use Storybook's out-of-the-box support for smoke testing to verify that components render correctly without any errors. Just run pnpm run test-storybook to perform smoke testing. Remember to write stories in JSX or TSX format only. Smoke testing and a lot of other functionalities dont work well with MDX stories.