Example unit test - Enzyme

Last Updated: December 2, 2024

Enzyme is no longer being updated by its creators. Users should migrate all uses of Enzyme-specific code, such as the mount() function, over to RTL for stability and security purposes.

The VA.gov Platform provides helper utilities to make writing tests easier. The following example unit tests illustrate some of these helpers.

CODE

import React from 'react';
import { expect } from 'chai';
import sinon from 'sinon';
import { mount } from 'enzyme';
import { DefinitionTester, fillData, selectRadio, fillDate } from '../../../../platform/testing/unit/schemaform-utils.jsx';
import formConfig from '../config/form.js';

describe('VIC veteran information', () => {
  const { schema, uiSchema } = formConfig.chapters.veteranInformation.pages.veteranInformation;
  it('should render', () => {
    const form = mount(
      <DefinitionTester
        definitions={formConfig.defaultDefinitions}
        schema={schema}
        data={{}}
        uiSchema={uiSchema}
        />
    );
    expect(form.find('input').length).to.equal(7);
    expect(form.find('select').length).to.equal(4);
    form.unmount();
  });
  ...
});

Helpers are imported from schemaform-utils.jsx. The DefinitionTester is a component you can use to simulate a page being rendered without having to set up a whole form application with all the dependencies. This example uses Enzyme and mounts a DefinitionTester component that is passed in the schema information from the veteranInformation page as props. The test checks to make sure there are 7 input and 4 select entries on the page. When there are errors with definitions on the form pages, you will often see inputs not being rendered, so this helps check for that scenario. The next test in the file checks to see that the right fields are marked as required:

CODE

  it('should not submit without required info', () => {
    const onSubmit = sinon.spy();
    const form = mount(
      <DefinitionTester
        onSubmit={onSubmit}
        definitions={formConfig.defaultDefinitions}
        schema={schema}
        data={{}}
        uiSchema={uiSchema}
        />
    );
    form.find('form').simulate('submit');
    expect(form.find('.usa-input-error').length).to.equal(6);
    expect(onSubmit.called).to.be.false;
    form.unmount();
  });

This test simulates a form submission and then counts the number of error elements on the page, which is expected to be six. The test checks that the existing validation rules are still generally in place and that additional rules haven't been added. Finally, this example test fills in all the data and submits the form:

CODE

  it('should submit with all info filled in', () => {
    const onSubmit = sinon.spy();
    const form = mount(
      <DefinitionTester
        onSubmit={onSubmit}
        definitions={formConfig.defaultDefinitions}
        schema={schema}
        data={{}}
        uiSchema={uiSchema}
        />
    );
    fillData(form, 'input#root_veteranFullName_first', 'test');
    fillData(form, 'input#root_veteranFullName_last', 'test2');
    fillData(form, 'input#root_veteranSocialSecurityNumber', '233224343');
    selectRadio(form, 'root_gender', 'F');
    fillDate(form, 'root_veteranDateOfBirth', '1920-01-04');
    fillData(form, 'select#root_serviceBranch', 'F');
    form.find('form').simulate('submit');
    expect(form.find('.usa-input-error').length).to.equal(0);
    expect(onSubmit.called).to.be.true;
    form.unmount();
  });

Helper functions make the correct Enzyme calls to fill in data, so there isn't a lot of repeated code. The helpers are documented in the schemaform-utils.jsx file. The helpers fill in data and then check that the right number of inputs appear on the page after that change. Some of the tests also directly test logic in depends functions on the page configuration.

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.