Skip to main content
Skip table of contents

Example unit test - Enzyme

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.


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.