<commit_before># StoryShots

StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).

[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)

![StoryShots In Action](docs/storyshots-fail.png)

To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing.

## Getting Started

Add the following module into your app.

```sh
npm install --save-dev @storybook/addon-storyshots
```

## Configure your app for Jest
In many cases, for example Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.

If you still need to configure jest you can use the resources mentioned below:

-   [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
-   [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). ***paid content***

> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
>
> Note: Make sure you have added the ```json``` extention to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybooks/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
>
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.


### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)

Sometimes it's useful to configure Storybook with Webpack's require.context feature:

```js
import { configure } from '@storybook/react';

const req = require.context('../stories', true, /.stories.js$/); // <- import all the stories at once

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
```

The problem here is that it will work only during the build with webpack,
other tools may lack this feature. Since Storyshot is running under Jest,
we need to polyfill this functionality to work with Jest. The easiest
way is to integrate it to babel. One of the possible babel plugins to
polyfill this functionality might be
[babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).

To register it, add the following to your jest setup:

```js
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();
```

And after, add the plugin to `.babelrc`:

```json
{
  "presets": ["..."],
  "plugins": ["..."],
  "env": {
    "test": {
      "plugins": ["require-context-hook"]
    }
  }
}
```

Make sure **not** to include this babel plugin in the config
environment that applies to webpack, otherwise it may
replace a real `require.context` functionality.

### Configure Jest for React
StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
[doesn't](#deps-issue) install it, so you need to install it separately.

```sh
npm install --save-dev react-test-renderer
```

### Configure Jest for Angular
StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but
[doesn't](#deps-issue) install it, so you need to install it separately.
<commit_msg>docs: update note about require.context<commit_after># StoryShots

StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).

[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)

![StoryShots In Action](docs/storyshots-fail.png)

To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing.

## Getting Started

Add the following module into your app.

```sh
npm install --save-dev @storybook/addon-storyshots
```

## Configure your app for Jest
In many cases, for example Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.

If you still need to configure jest you can use the resources mentioned below:

-   [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
-   [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). ***paid content***

> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
>
> Note: Make sure you have added the ```json``` extention to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybooks/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
>
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.


### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)

Sometimes it's useful to configure Storybook with Webpack's require.context feature:

```js
import { configure } from '@storybook/react';

const req = require.context('../stories', true, /.stories.js$/); // <- import all the stories at once

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
```

The problem here is that it will work only during the build with webpack,
other tools may lack this feature. Since Storyshot is running under Jest,
we need to polyfill this functionality to work with Jest. The easiest
way is to integrate it to babel.

One of the possible babel plugins to
polyfill this functionality might be
[babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).

First, install it:

```sh
npm install --save-dev babel-plugin-require-context-hook
```

Next, it needs to be registered and loaded before each test. To register it, create a file with the following register function `.jest/register-context.js`:

```js
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();
```
That file needs to be added as a setup file for Jest. To do that, add (or create) a property in Jest's config called [`setupFiles`](https://jestjs.io/docs/en/configuration.html#setupfiles-array). Add the file name and path to this array.

```json
setupFiles: ['<rootDir>/.jest/register-context.js']
```
Finally, add the plugin to `.babelrc`:

```json
{
  "presets": ["..."],
  "plugins": ["..."],
  "env": {
    "test": {
      "plugins": ["require-context-hook"]
    }
  }
}
```
The plugin is only added to the test environment otherwise it could replace webpack's version of it.

### Configure Jest for React
StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
[doesn't](#deps-issue) install it, so you need to install it separately.

```sh
npm install --save-dev react-test-renderer
```

### Configure Jest for Angular
StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but
[doesn't](#deps-issue) install it, so you need to install it separately.

{'fraction_non_alphanumeric': 0.1255179788798289, 'fraction_numerical': 0.005079534821547921, 'mean_word_length': 4.663890991672975, 'pattern_counts': {'":': 10, '<': 6, '<?xml version=': 0, '>': 16, 'https://': 21, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5820348', 'n_tokens_mistral': 2281, 'n_tokens_neox': 2142, 'n_words': 778}