Testing

Overview

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>.

Cookbook

We've created a few example tests and added them to our Cookbook.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.