Storytests-webpack-plugin NPM

Storytests Webpack Plugin

If you use Storybook and you want to cover all your stories by tests, this plugin helps you to do this.
This plugin creates test files based on your Storybook structure.

Installation

npm i storytests-webpack-plugin --save-dev

Usage

Define parameters

path to stories

storyFilesPath: string; // e.g. "components/**/__stories__/*.stories.tsx"

pattern for component name in your story files

componentNamePattern: RegExp; // e.g. /[a-z]+(?=", module)/gi

pattern for story name in your story files

storyNamePattern: RegExp; // e.g. /[a-z ]+(?=", \(\) => )/gi

path to directory with tests related to story

testDirectoryPath: string; // e.g." ../../tests"

postfixes for test files

testFilePostfixes: string[]; // e.g. ['hermione']

function for generating test file

testTemplate: (componentName: string, storyName: string) => string;

Add the plugin to your webpack config

import StorytestsWebpackPlugin from 'storytests-webpack-plugin';
import { componentNamePattern, storyFilesPath, storyNamePattern, testDirectoryPath, testFilePostfixes } from './constants/';
import { testTemplate } from './helpers/';
...
module.exports = {
    ...
    plugins: [
        new StorytestsWebpackPlugin({
            componentNamePattern,
            storyFilesPath,
            storyNamePattern,
            testDirectoryPath,
            testFilePostfixes,
            testTemplate
        })
    ]
}