React Test

Expressive testing library for React to make sure your code works as expected. Simulate user interactions and events asynchronously. Write better code, ship fewer bugs.

npm install react-test

Documentation Donate

import $ from "react-test";
import Counter from "./Counter.js";

it("increments when clicked", async () => {
  const counter = $(<Counter />);
  expect(counter).toHaveText("0");
  await counter.click();
  expect(counter).toHaveText("1");
});

Documented

Getting started, API, Jest matchers and examples for your convenience

Simulate Events

Trigger a .click(), .type() some text, or .change() some value easily

Jest Matchers

Write intuitive test assertions and fail with clear error messages

Stable and tested

With 250+ tests to ensure everything works. We follow semver strictly

Modern React

Supports hooks and React 18. Use await for events and DOM updates

Familiar

React Test uses jQuery syntax for rendering and navigating components.

Render and assert

Allows you to render React components and make assertions against it with Jest or other testing libraries.

You can use the library methods to read values like .text(), or get the first node with .first() and then use the native DOM API.

import $ from "react-test";

it("renders a simple title", () => {
  const title = $(<h1>Hello</h1>);
  expect(title.text()).toBe("Hello");
  expect(title.attr("id")).toBe(null);
  expect(title.first().nodeName).toBe("H1");
  // ...
});

Idiomatic Jest Matchers

We've also created a series of Jest Matchers (included by default if you use Jest) that makes the tests more readable and the error messages when a test fails very clear.

They can be used in single elements and for a set of elements, both in the affirmative and negative form.

import $ from "react-test";

it("renders a simple title", () => {
  const title = $(<h1>Hello</h1>);
  expect(title).toHaveText("Hello");
  expect(title).not.toHaveAttribute("id");
  expect(title).toMatchSelector("h1");
  // ...
});

Simulate user actions

This is where this library gets really valuable! Emulating user interactions is as easy as it could ever be. There's multiple event helpers available.

For example, to test a Counter that increments when clicked: render and assert the initial status, then await for a user click, and finally make more assertions.

import $ from "react-test";
import Counter from "./Counter";

it("Can increment a counter", async () => {
  const counter = $(<Counter />);
  expect(counter).toHaveText("0");
  await counter.click();
  // Or await counter.find("button").click();
  expect(counter).toHaveText("1");
});

Timers, async, etc.

There's other helpers for common React workflows: waiting for a network call, for a specific DOM element, or for fixed amount of time before doing assertions.

You can use .delay() for a simple timer or until() for more complex DOM behavior.

import $ from "react-test";
import UserList from "./UserList";

it("Can wait for a DOM change", async () => {
  const users = $(<UserList />);
  expect(users.find("ul li").length).toBe(0);
  await until(users).find("ul li");
  expect(users.find("ul li").length).toBe(10);
});

Created by Francisco and other contributors.

Need help? Book a call.