Jest

React storybook 插件，用于显示组件的 Jest 报告

在 Github 上查看

66k

每周下载量

由 Storybook 制作

Storybook 插件 Jest

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

框架支持

查看上面的实时 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...