React Browser Tests
  • Home
  • Components
    • Test Container
    • Test
    • Test Group
    • Single Test Container Overview
    • Multiple Test Container Overview
    • Multiple Page Overview
    • Sidebar Layout
  • Helper Functions
  • Run in a Terminal
  • Tests

Components

The main components provided by the React Browser Tests package are:

<TestContainer>

Container of <Test> components. Uses react context to manage the state of the tests.

<Test> components must have a <TestContainer> parent somewhere in the tree.

<Test>

Executes a test function and shows the result in a browser. Optionally, the tests can run in a terminal, via a headless browser for example.

The tests in a <TestContainer> run sequentially. The child components of each <Test> component are only rendered when the test is running or has run.

<Test> components must have a <TestContainer> parent somewhere in the tree.

<TestGroup>

Groups multiple <Test> components together. <Test> components can be used without a <TestGroup> parent.

<SingleTestContainersOverview>

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

<MultipleTestContainersOverview>

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

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

<MultiplePageOverview>

Receives an array of URLs and shows an overview of all the tests in all the pages.

This component creates an iframe for each of the passed in URLs. Then, for each iframe, a <MultipleTestContainersOverview> component is used to show an overview of the tests.

Currently, a <TestContainer> parent element is required (just for the CSS styles. This may change in the future).

<SidebarLayout>

Simple sidebar layout UI component. Contains a sidebar with links, a header and a main content area. Useful when handling multiple test pages.

The sidebar and header in this website were built using a <SidebarLayout> component.

Secondary components

The following are secondary components. They are used internally by the main components listed above, but are also exported as they may potentially be useful:

<TestStatsDisplay>

Receives an object with test stats, and shows the results. Example usage:

<TestContainer>
  <TestStatsDisplay
    testStats={{
      total: 3,
      passed: 2,
      failed: 0,
      skipped: 1,
      pending: 0,
      running: 0,
      state: "Success"
  }} />
</TestContainer>

Final result:

2
0
1
<TestArrayStats>

Receives a groupTitle and an array of tests. This component will render a <TestStatsDisplay> component with stats for all the tests in the passed in array.