加入直播会话:周四,美国东部时间上午 11 点,Storybook 9 发布及问答

测试工具,允许您在单元测试中重用您的故事

在 Github 上查看

⚠️ 重要提示:该软件包已废弃,同时 Storybook 也已停止支持 Vue2。如果您没有升级到 Vue 3 的计划,可以继续使用 Storybook 7。composeStories API 已在 Storybook 8 中提升为 Storybook 的一流功能,您现在可以将其作为 @storybook/vue3 的一部分使用。更多信息:https://github.com/storybookjs/testing-vue3/issues/16


⚠️ 如果您正在将 Storybook 与 Vue 3 一起使用,请改用 @storybook/testing-vue3

安装

该库应作为项目的 devDependencies 之一安装

通过 npm

npm install --save-dev @storybook/testing-vue

或通过 yarn

yarn add --dev @storybook/testing-vue

设置

Jest 配置

如果您使用 Jest 运行测试,您应该将 .vue 文件映射到使用包含模板编译器的 Vue 版本,并在您的 jest.config.js 中进行配置

moduleNameMapper: {
  '^vue$': 'vue/dist/vue.common.dev.js'
},

Storybook CSF

该库要求您使用 Storybook 的 组件故事格式 (CSF)提升的 CSF 注解,这是 Storybook 6 以来推荐的编写故事的方式。

基本上,如果您的故事看起来像这样,就可以使用了!

// CSF: default export (meta) + named exports (stories)
export default {
  title: 'Example/Button',
  component: Button,
};

export const Primary = () => ({
  template: '<my-button primary />',
});

全局配置

这是可选步骤。如果您没有全局装饰器,则无需执行此操作。但是,如果您有,这是应用全局装饰器的必要步骤。

如果您有全局装饰器/参数等,并希望在测试故事时应用它们,您首先需要进行设置。您可以通过添加或创建一个 jest setup file 来实现。

// setupFile.js <-- this will run before the tests in jest.
import { setGlobalConfig } from '@storybook/testing-vue';
import * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file

setGlobalConfig(globalStorybookConfig);

要使 setup file 生效,您需要在测试命令中将其作为选项传递给 jest

// package.json
{
  "test": "jest --setupFiles ./setupFile.js"
}

用法

composeStories

composeStories 将处理您指定组件的所有故事,在所有故事中组合 args/decorators,并返回一个包含组合后故事的对象。

如果您使用组合后的故事(例如 PrimaryButton),组件将使用故事中传递的 args 进行渲染。但是,您可以自由地在组件上传递任何 props,这些 props 将覆盖故事 args 中传递的默认值。

import { render, screen } from '@testing-library/vue';
import { composeStories } from '@storybook/testing-vue';
import * as stories from './Button.stories'; // import all stories from the stories file

// Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
const { Primary, Secondary } = composeStories(stories);

test('renders primary button with default args', () => {
  render(Primary());
  const buttonElement = screen.getByText(
    /Text coming from args in stories file!/i
  );
  expect(buttonElement).not.toBeNull();
});

test('renders primary button with overriden props', () => {
  render(Secondary({ label: 'Hello world' })); // you can override props and they will get merged with values from the Story's args
  const buttonElement = screen.getByText(/Hello world/i);
  expect(buttonElement).not.toBeNull();
});

composeStory

如果您只想应用于单个故事而不是所有故事,可以使用 composeStory。您还需要传递 meta(默认导出)。

import { render, screen } from '@testing-library/vue';
import { composeStory } from '@storybook/testing-vue';
import Meta, { Primary as PrimaryStory } from './Button.stories';

// Returns a component that already contain all decorators from story level, meta level and global level.
const Primary = composeStory(PrimaryStory, Meta);

test('onclick handler is called', async () => {
  const onClickSpy = jest.fn();
  render(Primary({ onClick: onClickSpy }));
  const buttonElement = screen.getByRole('button');
  buttonElement.click();
  expect(onClickSpy).toHaveBeenCalled();
});

许可证

MIT

贡献者
  • shaunlloyd
    shaunlloyd
  • kylegach
    kylegach
  • tooppaaa
    tooppaaa
  • ndelangen
    ndelangen
  • shilman
    shilman
  • alexandrebodin
    alexandrebodin
标签