Testing Forms and Sequences

React Multi Page Forms provides two tools to make testing and development easier.

Testing the sequence with followSequence

This function takes a sequence or an array of pages and sequences, some data, and runs through the form. It returns an array of visited pages.

This utility enables you to test sequences easily.

import { followSequence } from 'react-multi-page-form/testUtils/followSequence';
import { wyomingSequence } from '../stateSequences';

describe('wyoming sequence', () => {
	it("should include video visits when they're accepted", () => {	
		const data = {
			state: 'WY',
			acceptsVideoVisits: true
		};

		const visited = followSequence(wyomingSequence, data)

		const pageIds = visited.map(page => page.id);

		expect(pageIds).toEqual([
			'page-one',
			'page-two',
			'video-visits',
			'last-page'
		]);
	})
});

Viewing all forms with the FormPagesTester component

Building and ensuring accurate validation on your forms can be very challenging. This utility component takes an array of pages and sample data, and makes a single page that contains all the forms for the sequence. This component can be useful when combined with Storybook and visual testing.

See an example on the pet rock registration form.

'use client';
import { flattenPages } from 'react-multi-page-form/utils';
import { FormPagesTester } from 'react-multi-page-form/testUtils/FormPagesTester';
import { pages } from '../sequence';
import { rockyMcSmooth } from '../sampleData';

const [flattened] = flattenPages(pages);

export default function PetRockTest() {
    return (
        <>
            <h1>Pet Rock Test Page</h1>
            <FormPagesTester pages={flattened} sampleData={rockyMcSmooth} />
        </>
    );
}