Storybook Jest 插件

用于检查 Jest 单元测试结果的 Storybook 插件。

框架支持

查看上面的 Storybook 演示。

安装

通过添加 @storybook/addon-jest 作为开发依赖项来安装此插件：

npm install --save-dev @storybook/addon-jest

或者，如果您使用 yarn 作为包管理器：

yarn add --dev @storybook/addon-jest

配置

在您的 .storybook/main.js 中注册插件

export default {
  addons: ['@storybook/addon-jest'],
};

Jest 配置

运行 **Jest** 时，请确保将结果保存到 JSON 文件中

"scripts": {
  "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
}

您可能希望将结果文件添加到 .gitignore 中，因为它是一个生成的文件

.jest-test-results.json

但与锁定文件和快照类似，签入生成的文件也具有一定的优势。这取决于您。我们建议**签入**测试结果文件，以便从干净的 git 克隆启动 Storybook 不需要先运行所有测试，但这可能意味着您将来会在该文件上遇到合并冲突（*重新生成此文件与重新生成锁定文件和快照非常类似*）。

生成测试结果

在启动 Storybook 之前，请确保生成的测试结果文件存在。在开发过程中，您可能会以监视模式启动 Jest，因此每次代码或测试更改时都会重新生成 JSON 文件。

npm run test:generate-output -- --watch

并在 Jest 配置中，将 jest-test-results.json 添加到 modulePathIgnorePatterns 中以避免无限循环。

modulePathIgnorePatterns: ['node_modules', 'jest-test-results.json'],

然后，此更改将使用 webpack 进行 HMR（热模块重新加载），并由此插件显示。

如果您想在开发或静态构建期间自动预运行 Jest，则需要考虑，如果您的测试失败，脚本将收到一个非 0 的退出代码并退出。您可以创建一个 prebuild:storybook npm 脚本，它将永远不会失败，方法是在后面追加 || true

"scripts": {
  "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
  "test": "jest",
  "prebuild:storybook": "npm run test:generate-output",
  "build:storybook": "build-storybook -c .storybook -o build/",
  "predeploy": "npm run build:storybook",
  "deploy": "gh-pages -d build/",
}

用法

假设您已经为您的组件创建了一个测试文件（例如，MyComponent.test.js）。

故事级别

在您的故事文件中，将 装饰器 添加到故事的默认导出以显示结果

// MyComponent.stories.js|jsx
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';
import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
  decorators: [withTests({ results })],
};

您还可以通过包含 jest 参数 在您的故事中添加多个测试结果，例如

// MyComponent.stories.js|jsx

import MyComponent from './MyComponent';

import results from '../.jest-test-results.json';

import { withTests } from '@storybook/addon-jest';

export default {
  component: MyComponent,
  title: 'MyComponent',
  decorators: [withTests({ results })],
};

const Template = (args) => <MyComponent {....args} />;

export const Default = Template.bind({});
Default.args = {
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: ['MyComponent.test.js', 'MyOtherComponent.test.js']
};

全局级别

为了避免在每个故事中导入测试结果，您可以更新您的 .storybook/preview.js 并包含一个装饰器，使您能够仅对定义了 jest 参数的故事显示结果

// .storybook/preview.js
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';

export const decorators = [
  withTests({
    results,
  }),
];

然后在你的故事文件中

// MyComponent.stories.js|jsx

import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
};

const Template = (args) => <MyComponent {....args} />;

export const Default = Template.bind({});
Default.args={
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: 'MyComponent.test.js',
};

如果没有提供，jest 参数将默认为从您的故事文件名推断。例如，如果您的故事文件是 MyComponent.stories.js，则将使用“MyComponent”查找您的测试文件结果。它目前在生产环境中不起作用。

禁用

您可以通过将 jest 参数设置为 {disable: true} 来禁用单个故事的插件

// MyComponent.stories.js|jsx
import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
};

const Template = (args) => <MyComponent {...args} />;

export const Default = Template.bind({});

Default.args = {
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: { disable: true },
};

与 Angular 一起使用

使用此插件与 Angular 结合使用需要一些额外的配置。您需要使用 jest-preset-angular 安装和配置 Jest。

然后，在您的 .storybook/preview.js 中，您需要添加一个带有以下内容的装饰器：

// .storybook/preview.js
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';

export const decorators = [
  withTests({
    results,
    filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
  }),
];

最后，在您的故事中，您需要包含以下内容：

// MyComponent.stories.ts
import type { Meta, StoryFn } from '@storybook/angular';
import MyComponent from './MyComponent.component';

export default {
  component: MyComponent,
  title: 'MyComponent',
} as Meta;

const Template: StoryFn<MyComponent> = (args: MyComponent) => ({
  props: args,
});

export const Default = Template.bind({});
Default.parameters = {
  jest: 'MyComponent.component',
};

可用选项

• options.results：OBJECT Jest 输出结果。必填
• filesExt：STRING 测试文件扩展名。可选。这允许您编写“MyComponent”而不是“MyComponent.test.js”。它将用作正则表达式来查找您的文件结果。默认值为 ((\\.specs?)|(\\.tests?))?(\\.js)?$。这意味着它将匹配：MyComponent.js、MyComponent.test.js、MyComponent.tests.js、MyComponent.spec.js、MyComponent.specs.js...

待办事项

• 添加覆盖率
• 更好地显示嵌套测试（describe）
• 显示测试日期
• 添加单元测试
• 添加代码风格检查
• 拆分

贡献

欢迎所有想法和贡献。

许可证

MIT © 2017-present Renaud Tertrais