Unit tests for forms pages
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
});
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
);
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
);
selectCheckbox()
- Enzyme helper that fires a change event with a value for a checkbox at the given name
Help and feedback
Get help from the Platform Support Team in Slack.
Submit a feature idea to the Platform.