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

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
  });
CODE
  • 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

fillData(
  form, // mounted <DefinitionTester />
  'select#root_blah' // selector
  'USA', // value
);
CODE
  • fillDate() - Enzyme helper that fills in a date field with data from the given date string

fillDate(
  form, // mounted <DefinitionTester />
  'select#root_blah' // selector
  '1950-1-3', // value
);
CODE
  • selectCheckbox() - Enzyme helper that fires a change event with a value for a checkbox at the given name