Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/styleguidist/snapguidist

Snapshot testing for React Styleguidist
https://github.com/styleguidist/snapguidist

jest react snapshot-testing styleguidist

Last synced: 4 months ago
JSON representation

Snapshot testing for React Styleguidist

Awesome Lists containing this project

README

        

[![Build Status](https://travis-ci.org/styleguidist/snapguidist.svg?branch=master)](https://travis-ci.org/styleguidist/snapguidist)
[![NPM version](https://img.shields.io/npm/v/snapguidist.svg)](https://www.npmjs.com/package/snapguidist)
[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

Preview

[Jest](https://github.com/facebook/jest) Snapshot Testing for [React Styleguidist](https://github.com/styleguidist/react-styleguidist).

## Demo

![Demo](demo.gif)

## Getting Started

To add `snapguidist` to your `react-styleguidist` configuration, follow these steps:

1. install the package using yarn or npm:

```bash
yarn add --dev snapguidist
```

2. enhance the webpack configuration in `styleguide.config.js`:

```diff
+const snapguidist = require('snapguidist');
-module.exports = {
+module.exports = snapguidist({
components: 'src/components/**/[A-Z]*.js',
defaultExample: true,
webpackConfig: {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
},
-};
+});
```

## Migrate to v4

In v4, snapshots have been renamed to `.sg` (as opposed to `.snap`) to avoid conflicts with Jest, and improve compatibility with [create-react-app](https://github.com/facebook/create-react-app).

Once upgraded to v4, please run `yarn test -u` to remove the old snapshots (new ones will be automatically generated on the next run)
or the following commands to rename them:
```sh
cd .snapguidist/__snapshots/
for old in *.snap; do git mv $old `basename $old .snap`.sg; done
```

## Example

To run the example, install the dependencies and start it:

```bash
cd example
yarn install
yarn start
```

## Development

> Any contribution to `snapguidist` is highly appreciated.

Run the following command from the root folder to enable the *hot-reload*:

```bash
yarn build:watch & yarn start
```

### Credits

Logo by [@SaraVieira](https://github.com/SaraVieira)