storyshots

Storyshots offer another avenue for testing components similar to jest snapshots. Read more here https://storybook.js.org/testing/structural-testing/

Setting up storyshots

The getting started does not fully explain all the steps required so I will highlight things that may cause the setup to fail.

1. Dependencies

First step is make sure you have the following deps installed:

    "@storybook/addon-storyshots": "^3.4.8",
    "babel-plugin-require-context-hook": "^1.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",

2. Configure jest and babel

In your jest config main file import the require context hook and invoke it

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook(); // required for storyshots to use webpack require.context

Ensure your babelrc test env looks like this (see test config):

"env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    },
    "test": {
      "presets":[
        ["env", { "modules": false }],
        "react"
        ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node",
        "require-context-hook",
        "transform-class-properties"
      ]
    }
  }

3. Add storyshot spec file

• Make sure you pass a configPath pointing to your storybook config directory

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  configPath: '.tooling/storybook'
});

4. Run your jest tests

npm test

• Upon running your jest tests you should now see storyshots generated.

5. Update your snapshots

npm test -- -u will update snapshots