Skip to main content

Testing

falcon-client exposes FalconClientMock component which allows you to setup application context inside unit test environment. FalconClientMock can receive props for mock version of React context provider components used by falcon-client internally:

  • apollo: object - props for MockProvider component from react-apollo
  • router: object props for MemoryRouter component from react-router-dom
  • asyncComponent: object - props for AsyncComponentProvider component from react-async-component
  • i18next: object - props for I18nextProvider component from react-i18next
  • helmet: object - props for HelmetProvider component from react-helmet-async

Tests should be named [component].test.js.

Jest Logo

Under the hood FalconClientMock uses Jest and has access to all the same mock functions.

Running Tests​

Tests can be run in the command line from your client directory using npm or yarn. This will run all tests.

npm test

Options​

Running the test command will run all tests, you will then have access to the following options:

  • Press a to run all tests.
  • Press f to run only failed tests.
  • Press o to only run tests related to changed files.
  • Press p to filter by a filename regex pattern.
  • Press t to filter by a test name regex pattern.
  • Press q to quit watch mode.
  • Press Enter to trigger a test run.

Usage​

In this example we are testing the Banner component.

describe() expects 2 arguments, name and fn.

name will appear in your console to help you identify the tests, we advise using the component name here.

describe('<Banner />', ...
test screengrab

Inside the function (fn) passed to describe you can run your tests.

We advise familiarizing yourself with Jest before writing tests.

Banner.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { FalconClientMock } from '@deity/falcon-client/test-utils';
import { Banner } from './Banner';

describe('<Banner />', () => {
  const div = document.createElement('div');
  test('Renders correct content', () => {
    ReactDOM.render(
      <FalconClientMock>
        <Banner />
      </FalconClientMock>,
      div
    );
    expect(div.innerHTML).toEqual(expect.stringContaining('<p>Banner</p>'));
  });
});

In this simple test we check that the <Banner /> component renders <p>Banner</p>.