https://github.com/nadeesha/jest-snapper

Effortless snapshot testing for React Apps on Jest! :camera:
https://github.com/nadeesha/jest-snapper

Last synced: 4 days ago
JSON representation

Effortless snapshot testing for React Apps on Jest! :camera:

• Host: GitHub
• URL: https://github.com/nadeesha/jest-snapper
• Owner: nadeesha
• Created: 2017-08-12T02:02:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-01T23:52:36.000Z (about 7 years ago)
• Last Synced: 2024-04-14T07:10:40.249Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![](https://circleci.com/gh/nadeesha/jest-snapper.svg?style=shield&circle-token=:circle-token) [![npm version](https://badge.fury.io/js/jest-snapper.svg)](https://badge.fury.io/js/jest-snapper)

# jest-snapper

## Introduction

`jest-snapper` generates mock props for a given React component, based on it's `propTypes`. Then it does a `jest` [snapshot test](https://facebook.github.io/jest/docs/snapshot-testing.html) for the component. Think - one line snapshot tests for your react components.

## Prerequisites

`jest-snapper` assumes (and requires) you run it through [jest](https://facebook.github.io/jest/). It makes advantage of the built-in snapshot testing capability of jest.

## Example

```js

// __tests__/MyReactComponent.jsx

import snaptest from 'jest-snapper';

snaptest('should render component', MyReactComponent);

```

## Installation

```bash

yarn add jest-snapper

```

## API

It has one export, which is default.

```js

import snaptest from 'jest-snapper';

// or

const snaptest = require('jest-snapper');

```

This will infer propTypes from your component's props and run a snapshot test with deterministic values.

```js

snaptest(

  description: string,

  component: typeof React.Component,

  {

    props: any?, // optional

    state: any?, // optional

  }

)

```

examples:

```js

// Example 1: jest-snapper will generate props for you

snaptest('simple test', MyComponent);

// Example 2: You can selectively assign your own props

snaptest('with some overriden props', MyComponent, {

  props: {

    age: '42',

  },

});

// Example 3: Setting `state` will trigger a `this.setState`

// before the snapshot is taken.

snaptest('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` and `oneOfType` propTypes

- Expose mock data generator and allow the user to override it

- Support better Typescript Typings