jest-snapper
Introduction
Automatically generate jest based snapshot tests for your React components by inferring props through propTypes
definition.
Example
Test happy:
// __tests__/SimpleStateless.jsx;; ; // jest-snapper will do a snapshot test with auto-generated values for props.
Given a sample your React Component:
// SimpleStateless.jsx const SimpleStateless = <div => <span>propsnamefirstName</span> <span>propsnamelastName</span> </div>; SimpleStatelesspropTypes = id: ReactPropTypesnumberisRequired name: ReactPropTypes
Installation and Configuration
1. Install:
yarn add jest-snapper
init
step:
2. Confgure jest-snapper needs to inject some helpers into React.PropTypes
or the standalone prop-types
package, depending on which one you're using.
Add this to your init.js script (or create one).
// scripts/jest/init.js;; // this injects some helpers into propTypes.
And add this line to your jest
config.
"jest":
This will test jest to run this file before your test run commences.
API
init
init
is a one-time configuration that you must do before a test run. You should supply the same PropTypes
package here that you'd use in your application. Be it React.PropTypes
or the newer standalone prop-types
npm package.
initPropTypes: typeof React.PropTypes
example:
init(React.PropTypes);
test
test
will infer propTypes from your component's props and run a snapshot test with deterministic values.
test description: string, component: typeof React.Component,
examples:
// Example 1: react-snapper will generate props for you
test('simple test', MyComponent);
// Example 2: You can selectively assign your own props
test('with some overriden props', MyComponent, {
props: {
age: '42',
},
});
// Example 3: Setting `state` will trigger a `this.setState`
// before the snapshot is taken.
test('with a state change', MyComponent, {
state: {
textInputValue: 'foobar',
},
});
Caveats
To minimize the effort needed to introduce this library to an existing codebase, I've made the decision to inject fake data generators (yes, like a cowboy) into PropTypes
. This is a spartan solution, but works well. This is an area for possible future improvement.
Todo
- Add multiple test permutations for
oneOf
andoneOfType
propTypes - Expose mock data generator and allow the user to override it
- Support Better Typings