Unit tests for forms pages

Use the following guidelines when writing a unit test for forms pages.

CODE

import { expect } from 'chai';
import { render } from '@testing-library/react';
import { DefinitionTester } from 'platform/testing/unit/schemaform-utils';

describe('MyForm FormID', () => {
  const {
    schema,
    uiSchema,
    arrayPath,
  } = formConfig.chapters.myFormChapter.pages.myFormPage;
  it('renders myFormPage form', () => {
    const screen = render(
      <DefinitionTester
        arrayPath={arrayPath}
        pagePerItemIndex={0}
        definitions={formConfig.defaultDefinitions}
        schema={schema}
        data={initialData}
        formData={initialData}
        uiSchema={uiSchema}
      />,
    );
    expect(screen.queryAllByRole('combobox')).to.equal(6); // from/to months, days; country, state
    expect(screen.queryAllByRole('textbox')).to.equal(4); // facility name, from/to years, city
  });

Organize forms config tests by page.
Use <DefinitionTester /> to render form configs for testing.
Test at least the following:
- Number of each type of input is rendered (example above)
- Any conditional display logic on the page
- All field level validation errors

When working with Enzyme, you can use the other schemaform-utils for filling out form data:

fillData() - Enzyme helper that fires a change event with a value for an element at the given selector

CODE

fillData(
  form, // mounted <DefinitionTester />
  'select#root_blah' // selector
  'USA', // value
);

fillDate() - Enzyme helper that fills in a date field with data from the given date string

CODE

fillDate(
  form, // mounted <DefinitionTester />
  'select#root_blah' // selector
  '1950-1-3', // value
);

selectCheckbox() - Enzyme helper that fires a change event with a value for a checkbox at the given name

Help and feedback

Suggest content changes to this page.
Submit new Platform Website content.
Get help from the Platform Support Team in Slack.
Submit a feature idea to the Platform.