• Docs
  • Ecosystem
  • Tutorial
  • Shop
  • GitHub
  • @QwikDev
  • Discord

Qwik Testing Library

⚡ Simple and complete Qwik DOM testing utilities that encourage good testing practices.

Qwik Testing Library is a lightweight library for testing Qwik components. It provides functions on top of Qwik and DOM Testing Library so you can mount Qwik components and query their rendered output in the DOM. Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

Note that because Vite is used by default for Qwik projects, the Qwik Testing Library integration was configured to run tests with Vitest.

Usage

You can add Qwik Testing Library easily by using the following Qwik starter script:

pnpm run qwik add testing-library

After running the command, qwik-testing-library will be installed, configured, and a new component will be added to your project.

The component will be added to the src/components/example directory along with a new unit test named example. spec.tsx.

example.spec.tsx
// import qwik-testing methods
import { screen, render, waitFor } from "@noma.to/qwik-testing-library";
// import the userEvent methods to interact with the DOM
import { userEvent } from "@testing-library/user-event";
// import the component to be tested
import { ExampleTest } from "./example";
 
// describe the test suite
describe("<ExampleTest />", () => {
  // describe the test case
  it("should increment the counter", async () => {
    // setup user event
    const user = userEvent.setup();
    // render the component into the DOM
    await render(<ExampleTest />);
 
    // retrieve the 'increment count' button
    const incrementBtn = screen.getByRole("button", {
      name: /increment counter/i,
    });
    // click the button twice
    await user.click(incrementBtn);
    await user.click(incrementBtn);
 
    // assert that the counter is now 2
    expect(await screen.findByText(/count:2/i)).toBeInTheDocument();
  });
});

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • ianlet