@microsoft/fast-jest-snapshots-react

A small utility for automating Jest snapshot creation of React components

Stats

StarsIssuesVersionUpdatedCreatedSize
@microsoft/fast-jest-snapshots-react
5,9893214.0.42 years ago3 years agoMinified + gzip package size for @microsoft/fast-jest-snapshots-react in KB

Readme

FAST Jest snapshots React

This package has been deprecated and is no longer under active development. @microsoft/fast-jest-snapshots-react is a small utility library for creating snapshot Jest tests for React components. Given a single component, the generateSnapshots function will iterate over a set of prop data and create a snapshot test for each prop instance.

Usage

To use, import the ISnapshotTestSuite interface and the generateSnapshots function from @microsoft/fast-jest-snapshots-react:

import {generateSnapshots, ISnapshotTestSuite} from "@microsoft/fast-jest-snapshots-react";

Then, create you test data snapshot suite, where every index of data is a valid prop object for your component:

// in a Jest test file
import {MyReactComponent, IMyReactComponentProps} from "my-react-component.tsx";
import {ISnapshotTestSuite, generateSnapshots} from "@microsoft/fast-jest-snapshots-react";

const testSuite: ISnapshotTestSuite<IMyReactComponentProps> = {
    name: 'test component',
    component: MyCustomReactComponentConstructor,
    data: [
        {
            id: "test-id",
            text: "hello world",
            // other component props
        }
    ]
};

// Generate snapshots using the prop and component data you defined
generateSnapshots(testSuite);

Snapshot descriptions

Descriptions can optionally be applied to any snapshot for providing context to the test and the expectation of the test. To do this, simply put the prop object into an array where the first index is the snapshot description and the second index is the prop object:

// in a Jest test file
import {MyReactComponent, IMyReactComponentProps} from "my-react-component.tsx";
import {ISnapshotTestSuite, generateSnapshots} from "@microsoft/fast-jest-snapshots-react";

const testSuite: ISnapshotTestSuite<IMyReactComponentProps> = {
    // ...
    data: [
        [
            "should render with an id attribute",
            {
                id: "test-id",
                text: "hello world",
                // other component props
            }

        ]
    ]
};

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.