<MultipleTestContainersOverview>

Note: having multiple <TestContainer> elements in a page is possible, but it will significantly increase complexity, and may not be working 100% correctly.

Shows an overview of all the tests in all <TestContainer> elements in a single page.

Example with 2 <TestContainer>'s in a NextJS page:

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

export default function Page() {
  return (
    <>
      <TestContainer>
        <Test style={{display: "none"}} title="Simple passing test: 1 + 1 = 2" fn={async () => {
          expect(1 + 1).to.equal(2);
        }} />
      </TestContainer >

      <TestContainer id="failing-container">
        <Test style={{display: "none"}} title="Simple failing test: 1 + 1 = 3" fn={async () => {
          expect(1 + 1).to.equal(3);
        }} />
      </TestContainer >

      <MultipleTestContainersOverview />
    </>
  );
}

Note that in the code above, the tests have display: none. This way, only the <MultipleTestContainersOverview> component will be visible. The final result is:

Props