@hackney/mtfh-test-utils

test-utils

Testing utilities for Jest utilising the @testing-library and mws frameworks.

Usage

Add the lib to jest config:

setupFilesAfterEnv: ["@testing-library/jest-dom", "@hackney/mtfh-test-utils"],

Render

You should always prefer to use the render method from this library when testing.

import { render } from "@hackney/mtfh-test-utils";

React Router Dom

The render method wraps tests in our custom ConfirmationRouter (see here)

render(<PageView />);

If your page requires path params to be defined, ie your component utilises useParams, useLocation etc, from react-router-dom.

render(<PageView />, {
  url: "/person/b7ab8dd3-b200-40b0-98e0-324781ec0832",
  path: "/person/:personId",
});

Media Queries

To render the view at a specific device size, you can initialise the options with one of the defined values.

render(<Button />, { query: "sm" });

The accepted queries are defined as the following:

const queries = {
  base: "(min-width: 0px) and (max-width: 479px)",
  sm: "(min-width: 480px) and (max-width: 767px)",
  md: "(min-width: 768px) and (max-width: 991px)",
  lg: "(min-width: 992px) and (max-width: 1279px)",
  xl: "(min-width: 1280px) and (max-width: 1535px)",
  "2xl": "(min-width: 1536px)",
};

Testing Accessibility

We expose a helper to test a dom/react element for accessibility using jest-axe

import { render, testA11y } from "@hackney/mtfh-test-utils";

test("it passes a11y", async () => {
  const { container } = render(<Button />);
  await testA11y(container);
});

Or directly

import { testA11y } from "@hackney/mtfh-test-utils";

test("it passes a11y", async () => {
  await testA11y(<Button />);
});

Options

You can pass both render and axe configuration to the second argument as described in jest-axe.

await testA11y(<Button />, {
    query: 'sm',
    axeOptions: {
        rules: {
            'color-contrast': { enabled: true }
        }
    }
);

API Mocks and Handlers

The library exposes a msw node server, with no existing handlers defined:

import { server } from "@hackney/mtfh-test-utils";

Default Api Handlers

To add any of the versioned api handlers create a test-utils.ts file in your project and define the following:

import { server, getPersonV1, getCommentsV2 } from "@hackney/mtfh-test-utils";

beforeEach(() => {
  server.use(getPersonV1(), getCommentsV2());
});

NB: Don't forget to add your test-utils.ts file to the setupFilesAfterEnv option in jest.config.ts.

Override Handlers

When testing components that use any api, you should be testing failures. To do so simply define the usage before the render:

import { render, server, getPersonV1 } from "@hackney/mtfh-test-utils";

test("it handles an unexpected error", async () => {
  server.use(getPersonV1("error", 500));
  render(<PersonView />, {
    url: "/person/b7ab8dd3-b200-40b0-98e0-324781ec0832",
    path: "/person/:personId",
  });
});

Using Mocks

This library exposes helpers (using faker) to help generate mock data.

import { generateMockPersonV1 } from "@hackney/mtfh-test-utils";

const mockPerson = generateMockPersonV1({
  firstName: "Test",
});

We also expose pre-generated mocks for usage with handlers. View the relevant api to see what is there.