React Browser Tests

React Browser Tests is a browser first testing library. The tests are written in React and run in a browser. Terminal also works.

React Browser Tests works with NextJS and TypeScript. The assertions are done with Chai.

Getting started

The package can be installed with:

yarn add react-browser-tests

Examples

The following example shows a NextJS page with a Test:

import { Test, TestContainer, TestGroup, expect } from "react-browser-tests";

export default function TestPage() {
  return (
    <TestContainer>
        <Test title="Expect 1 + 1 to equal 2." fn={() => {
          expect(1 + 1).to.equal(2);
        }} />
    </TestContainer>
  );
}

If we navigate to that page, we'll see:

We can also pass in children to the Test component along with an async test function:

<Test title="Expect child component to exist." fn={async () => { 
  // Wait for the child component to be rendered.
  await waitFor(() => !!document.getElementById("child-component"));

  // Assert that the child component has the correct text content.
  expect(document.getElementById("child-component")!.textContent).to.equal("Child component.");
}}>
  <div id="child-component">Child component.</div>
</Test>

'waitFor' is a small utility function available in the 'react-browser-tests' package. The result is:

The test pages for the package contain more examples: /tests