Testing

Writing unit tests is always good idea 😉 and with PCR testing is a first-class citizen.

Recommended Stack

While you're welcome to choose your own stack, PCR uses @testing-library/react and jest.

Examples

Let's explore common testing scenarios using testing-library and jest 👍

Firing Events

99% of the time we want to write tests around our input controls before or after some change event. PCR makes this so easy you have three ways you can get this done. Keep in mind this works because PCR is not a soft control, it uses standard HTML elements to control the behavior which makes testing delightful 🧁

Selecting by Label Text

Using testing-library or some other tool, PCR "connects" the label with the input control so you can select the label text and fire your click event:

import { render, fireEvent } from '@testing-library/react';import { Checkbox } from 'pretty-checkbox-react';
describe('Checkbox tests', () => {    it('should trigger a change when clicked', () => {        const onChange = jest.fn();
        const { getByLabelText } = render(            <Checkbox onChange={onChange}>Hello</Checkbox>        );
        fireEvent.click(getByLabelText('Hello'));        expect(onChange).toHaveBeenCalledTimes(1);    });});

Selecting by Value

What about when a label doesn't exist but a value exists? Not a problem. Testing-library has a selector for that:

import { render, fireEvent } from '@testing-library/react';import { Checkbox } from 'pretty-checkbox-react';
describe('Checkbox tests', () => {    it('should trigger a change when clicked', () => {        const onChange = jest.fn();
        const { getByValue } = render(            <Checkbox onChange={onChange} value="terms" />        );
        fireEvent.click(getByValue('terms'));        expect(onChange).toHaveBeenCalledTimes(1);    });});

Accessing .pretty

In rare cases access to the .pretty element might be required — perhaps due to implementation details or some other customizations. Creating a stable reference to PCR is the preferred approach. Using testing-library we can create our own data-testid and use that as a reference point.

import { render, fireEvent } from '@testing-library/react';import { Checkbox } from 'pretty-checkbox-react';
describe('Checkbox tests', () => {    it('should trigger a change when clicked', () => {        const { getByTestId } = render(<Checkbox data-testid="my-cb" />);
        expect(getByTestId('my-cb').parentElement.className).toContain('pretty')    });});

Snapshot Testing

PCR uses a UUID generator which requires a little extra setup to make snapshot testing work. PCR uses nanoid@3 non-secure mode for generation. If you're using jest or some other tool you can tell your test runner to mock the nanoid module. Here's an example using jest:

import { render, fireEvent } from '@testing-library/react';import { Checkbox } from 'pretty-checkbox-react';import { nanoid } from 'nanoid/non-secure';
jest.mock("nanoid/non-secure");nanoid.mockImplementation(() => "123");
describe('Checkbox tests', () => {    it('should do something', () => {        const { container } = render(<Checkbox />);
        // ... make useful assertions here ...        expect(container).toMatchSnapshot();    });});