Storybook Vitest 插件

(⚠️实验性）

¥(⚠️ Experimental)

Storybook 的 Vitest 插件使用 可移植故事 将你的 stories 转换为 Vitest 测试。然后，这些测试可以与任何其他 Vitest 测试一起运行。这种方法比 测试运行器 更快、更灵活，测试运行器 需要运行 Storybook 实例来测试你的故事。

¥Storybook's Vitest plugin transforms your stories into Vitest tests using portable stories. Those tests can then be run alongside any other Vitest tests. This approach is faster and more flexible than the test runner, which required a running Storybook instance to test your stories.

我们建议（并默认配置）在 浏览器模式 中运行 Vitest，使用 Playwright 的 Chromium 浏览器。浏览器模式可确保你的组件在真实的浏览器环境中进行测试，这比 JSDom 或 HappyDom 等模拟更准确。这对于测试依赖浏览器 API 或功能的组件尤其重要。

¥We recommend (and configure, by default) running Vitest in browser mode, using Playwright's Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.

故事以两种方式进行测试：进行冒烟测试以确保其渲染，如果定义了 播放函数，则运行该函数并验证其中的任何 断言。

¥Stories are tested in two ways: a smoke test to ensure it renders and, if a play function is defined, that function is run and any assertions made within it are validated.

安装和设置

¥Install and set up

安装前，请确保你的项目满足以下要求：

¥Before installing, make sure your project meets the following requirements:

• Storybook ≥ 8.3

• 使用 Vite（例如 vue3-vite）或 Storybook Next.js 框架 的 Storybook 框架

  ¥A Storybook framework that uses Vite (e.g. vue3-vite), or the Storybook Next.js framework

• Vitest ≥ 2.0

  • 如果你不使用 Vitest，它将在你安装插件时为你安装和配置

    ¥If you're not using Vitest, it will be installed and configured for you when you install the addon

• 对于 Next.js 项目，Next.js ≥ 14.1

  ¥For Next.js projects, Next.js ≥ 14.1

如果你尚未使用 Storybook 8.3，你可以 升级你的 Storybook 到最新版本：

¥If you're not yet using Storybook 8.3, you can upgrade your Storybook to the latest version:

npx storybook@latest upgrade

自动设置

¥Automatic setup

运行以下命令来安装和配置插件，其中包含使用 Vitest 将你的故事作为测试运行的插件：

¥Run the following command to install and configure the addon, which contains the plugin to run your stories as tests using Vitest:

npx storybook add @storybook/experimental-addon-test

add 命令 将安装并注册测试插件。它还将检查你项目的 Vite 和 Vitest 设置，并在必要时使用合理的默认值安装和配置它们。你可能需要调整配置以满足你的项目需求。完整的配置选项可以在下面的 API 部分 中找到。

¥That add command will install and register the test addon. It will also inspect your project's Vite and Vitest setup, and install and configure them with sensible defaults, if necessary. You may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the API section, below.

手动设置

¥Manual setup

对于某些项目设置，add 命令可能无法自动化插件设置并要求你完成其他设置步骤。操作方法如下：

¥For some project setups, the add command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:

1. 确保 Vite 和 Vitest 已在你的项目中配置。

   ¥Make sure Vite and Vitest are configured in your project.

2. 配置 Vitest 以使用 浏览器模式。

   ¥Configure Vitest to use browser mode.

3. 在你的项目和 在你的 Storybook 配置中注册它 中安装插件 @storybook/experimental-addon-test。

   ¥Install the addon, @storybook/experimental-addon-test, in your project and register it in your Storybook configuration.

4. 创建测试设置文件 .storybook/vitest.setup.ts。你可以使用 示例设置文件 作为指南。

   ¥Create a test setup file, .storybook/vitest.setup.ts. You can use the example setup file as a guide.

5. 调整 Vitest 配置以包含插件并引用安装文件。你可以使用 示例配置文件 作为指南。

   ¥Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can use the example configuration files as a guide.

框架插件

¥Framework plugins

一些 Storybook 框架需要额外的设置才能使框架的功能与 Vitest 一起使用。每个框架都会导出一个 Vite 插件，你可以使用它来正确配置你的项目：

¥Some Storybook frameworks require additional setup to enable the framework's features to work with Vitest. Each of those frameworks exports a Vite plugin that you can use to configure your project correctly:

如果你使用的是 Next.js，请先安装 @storybook/experimental-nextjs-vite 包：

¥If you're using Next.js, first install the @storybook/experimental-nextjs-vite package:

npm install --save-dev @storybook/experimental-nextjs-vite

然后从 @storybook/experimental-nextjs-vite/vite-plugin 应用插件：

¥Then apply the plugin from @storybook/experimental-nextjs-vite/vite-plugin:

import { defineConfig, mergeConfig } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
import viteConfig from './vite.config';
 
export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [
      storybookTest(),
      storybookNextjsPlugin(), // 👈 Apply the framework plugin here
    ],
    // ...
  })
);

上面的示例在 Vitest 配置文件中使用了框架的插件。如果你的项目是这样配置的，你也可以在 Vitest 工作区文件中使用它。

¥The above example uses the framework's plugin in a Vitest configuration file. You can also use it in a Vitest workspace file, if that is how your project is configured.

示例配置文件

¥Example configuration files

当插件自动设置时，它将为你创建或调整 Vitest 配置文件。如果你手动设置，则在配置项目时可以使用以下示例作为参考。

¥When the addon is set up automatically, it will create or adjust your Vitest configuration files for you. If you're setting up manually, you can use the following examples as a reference when configuring your project.

import { beforeAll } from 'vitest';
// 👇 If you're using Next.js, import from @storybook/nextjs
//   If you're using Next.js with Vite, import from @storybook/experimental-nextjs-vite
import { setProjectAnnotations } from '@storybook/react';
import * as previewAnnotations from './.storybook/preview';
 
const annotations = setProjectAnnotations([previewAnnotations]);
 
// Run Storybook's beforeAll hook
beforeAll(annotations.beforeAll);

import { defineConfig, mergeConfig } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
// 👇 If you're using Next.js, apply this framework plugin as well
// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
import viteConfig from './vite.config';
 
export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [
      storybookTest({
        // This should match your package.json script to run Storybook
        // The --ci flag will skip prompts and not open a browser
        storybookScript: 'yarn storybook --ci',
      }),
      // storybookNextjsPlugin(),
    ],
    test: {
      // Glob pattern to find story files
      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
      // Enable browser mode
      browser: {
        enabled: true,
        name: 'chromium',
        // Make sure to install Playwright
        provider: 'playwright',
        headless: true,
      },
      // Speed up tests and better match how they run in Storybook itself
      // https://vitest.dev/config/#isolate
      // Consider removing this if you have flaky tests
      isolate: false,
      setupFiles: ['./.storybook/vitest.setup.ts'],
    },
  })
);

import { defineWorkspace } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
// 👇 If you're using Next.js, apply this framework plugin as well
// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
export default defineWorkspace([
  // This is the path to your existing Vitest config file
  './vitest.config.ts',
  {
    name: 'storybook',
    // This is the path to your existing Vite config file
    extends: './vite.config.ts',
    plugins: [
      storybookTest({
        // This should match your package.json script to run Storybook
        // The --ci flag will skip prompts and not open a browser
        storybookScript: 'yarn storybook --ci',
      }),
      // storybookNextjsPlugin(),
    ],
    test: {
      // Glob pattern to find story files
      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
      // Enable browser mode
      browser: {
        enabled: true,
        name: 'chromium',
        // Make sure to install Playwright
        provider: 'playwright',
        headless: true,
      },
      // Speed up tests and better match how they run in Storybook itself
      // https://vitest.dev/config/#isolate
      // Consider removing this if you have flaky tests
      isolate: false,
      setupFiles: ['./.storybook/vitest.setup.ts'],
    },
  },
]);

用法

¥Usage

使用 Vitest 插件运行测试的主要方法有三种：

¥There are three primary ways to run tests using the Vitest plugin:

CLI

该插件将你的故事转换为真正的 Vitest 测试，因此你可以像在项目中运行任何其他 Vitest 测试一样运行这些测试。通常，你的 package.json 中会有一个运行测试的 test 脚本。

¥The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a test script in your package.json that runs your tests.

如果你还没有 test 脚本，可以添加一个运行 Vitest 的脚本：

¥If you don't already have a test script, you can add one that runs Vitest:

{
  "scripts": {
    "test": "vitest"
  }
}

如果你已经有一个运行 Vitest 以外其他程序的 test 脚本，你可以调整它以运行 Vitest（如上所述）或添加运行 Vitest 的新脚本：

¥If you already have a test script that runs something other than Vitest, you can either adjust it to run Vitest (as above) or add a new script that runs Vitest:

{
  "scripts": {
    "test-storybook": "vitest"
  }
}

当你运行该脚本时，插件将查找并运行基于故事的测试。以下是使用 Vitest CLI 运行测试（默认情况下在 监视模式 中）的示例：

¥When you run that script, the plugin will find and run your story-based tests. Here's an example of running your tests (in watch mode, by default) using the Vitest CLI:

npm run test

编辑器扩展

¥Editor extension

使用插件将你的故事转换为 Vitest 测试还使你能够使用 Vitest IDE 集成 运行和调试测试。这允许你直接从编辑器（例如 VSCode 和 JetBrains IDE）运行测试。

¥Transforming your stories into Vitest tests with the plugin also enables you to run and debug tests using Vitest IDE integrations. This allows you to run tests directly from your editor, such as VSCode and JetBrains IDE.

此屏幕截图显示了如何使用 Vitest 扩展 在 VSCode 中运行 Vitest 测试。故事带有测试状态注释，当测试失败时，将为 debugging 提供故事链接。

¥This screenshot shows how you can run your Vitest tests in VSCode using the Vitest extension. Stories are annotated with the test status, and, when a test fails, a link to the story is provided for debugging.

在 CI 中

¥In CI

在大多数情况下，在 CI 中运行 Storybook 测试是通过 通过 CLI 完成的。但是，要让测试输出在测试失败时链接到你已发布的 Storybook，你需要在插件配置中提供 storybookUrl 选项。

¥For the most part, running your Storybook tests in CI is done via the CLI. However, to have the test output link to your published Storybook on test failures, you need to provide the storybookUrl option in the plugin configuration.

这是一个使用 GitHub Actions 的示例。其他 CI 提供商的步骤类似，但语法或配置的细节可能有所不同。

¥Here's an example using GitHub Actions. The steps are similar for other CI providers, though details in the syntax or configuration may vary.

当 Vercel、Netlify 等服务的操作运行部署作业时，它们遵循发出 deployment_status 事件的模式，该事件包含 deployment_status.target_url 下新生成的 URL。这是已发布的 Storybook 实例的 URL。然后，我们使用环境变量 SB_URL 将该 URL 传递给插件配置。最后，我们更新插件配置以在 storybookUrl 选项中使用该环境变量。

¥When actions for services like Vercel, Netlify and others run a deployment job, they follow a pattern of emitting a deployment_status event containing the newly generated URL under deployment_status.target_url. This is the URL to the published Storybook instance. We then pass that URL to the plugin configuration using an environment variable, SB_URL. Finally, we update the plugin configuration to use that environment variable in the storybookUrl option.

name: Storybook Tests
on: deployment_status
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18.x'
      - name: Install dependencies
        run: yarn
      - name: Run Storybook tests
        run: yarn test-storybook
        env:
          SB_URL: '${{ github.event.deployment_status.target_url }}'

export default defineWorkspace([
  // ...
  {
    // ...
    {
      plugins: [
        storybookTest({
          storybookScript: 'yarn storybook --ci',
          storybookUrl: process.env.SB_URL
        }),
      ],
    },
  },
])

调试

¥Debugging

虽然插件在测试时不需要 Storybook 运行，但你可能仍希望运行 Storybook 来调试测试。要启用此功能，请在插件配置中提供 storybookScript 选项。当你在监视模式下运行 Vitest 时，插件将使用此脚本启动 Storybook，并在测试失败时在输出中提供故事链接。这允许你快速跳转到 Storybook 中的故事来调试问题。

¥While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the storybookScript option in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.

你还可以为插件配置提供 storybookUrl 选项。当你未使用监视模式且测试失败时，插件将在输出中使用此 URL 提供指向故事的链接。这在 在 CI 中运行测试 或 Storybook 尚未运行的其他环境中很有用。

¥You can also provide a storybookUrl option to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when running tests in CI or other environments where Storybook is not already running.

配置测试

¥Configuring tests

Vitest 插件行为的大部分配置都是在 Vitest 配置和设置文件中完成的。但是，你也可以使用 tags 在故事中定义配置，以控制如何测试它们。

¥Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration and setup files. However, you can also define configuration in your stories themselves, using tags, to control how they are tested.

默认情况下，插件将运行所有带有 test 标签的故事。你可以通过在插件配置中提供 tags 选项 来调整此行为。这允许你根据故事的标签包含、排除或跳过故事。

¥By default, the plugin will run all stories with the test tag. You can adjust this behavior by providing the tags option in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.

在此示例中，我们将 stable 标签应用于所有 Button 组件的故事，ExperimentalFeatureStory 除外，它将具有 experimental 标签：

¥In this example, we'll apply the stable tag to all of the Button component's stories, except for ExperimentalFeatureStory, which will have the experimental tag:

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Applies to all stories in this file
  tags: ['stable'],
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const ExperimentalFeatureStory: Story = {
  /**
   * 👇 For this particular story, remove the inherited
   *    `stable` tag and apply the `experimental` tag
   */
  tags: ['!stable', 'experimental'],
};

要将这些标签连接到我们的测试行为，我们可以调整插件配置以排除 experimental 标签：

¥To connect those tags to our test behavior, we can adjust the plugin configuration to exclude the experimental tag:

export default defineWorkspace([
  // ...
  {
    // ...
    {
      plugins: [
        storybookTest({
          // ...
          tags: {
            include: ['test'],
            exclude: ['experimental'],
          },
        }),
      ],
    },
  },
])

如果相同的标签同时存在于 include 和 exclude 数组中，则 exclude 行为优先。

¥If the same tag is in both the include and exclude arrays, the exclude behavior takes precedence.

与测试运行器的比较

¥Comparison to the test runner

测试运行器 需要一个正在运行的 Storybook 实例来测试你的故事，因为它会访问每个故事，执行播放函数并监听结果。但是，此插件使用 Vite 和可移植故事将你的故事转换为测试，因此无需运行 Storybook 来测试你的故事。除了核心差异之外，还有其他一些区别：

¥The test runner requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. This plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Beyond that core difference, there are a few other distinctions:

此外，测试运行器将你的故事作为 Jest 中的编排测试运行，并且该编排带来了一些复杂性。相比之下，这个插件将你的故事转换成真正的测试，然后使用 Vitest 运行它们，这更简单，更易于配置。

¥Additionally, the test runner ran your stories as orchestrated tests in Jest, and that orchestration came with some complexity. By comparison, this plugin transforms your stories into real tests and then runs them using Vitest, which is simpler and more configurable.

最后，由于架构更简单并且使用 Vitest，这个插件应该比大多数项目的测试运行器更快。我们将在未来进行更多基准测试以量化这一点。

¥Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the test runner for most projects. We'll do more benchmarking to quantify this in the future.

常见问题

¥FAQ

如何在 Storybook 中调试我的测试？

¥How do I debug my tests in Storybook?

当测试失败时，出于 debugging 目的，插件将尝试在 Storybook 中提供故事链接。

¥The plugin will attempt to provide links to the story in Storybook when tests fail, for debugging purposes.

如果在监视模式下运行测试时 URL 不起作用，你应该检查两个配置选项：

¥If the URLs are not working when running tests in watch mode, you should check two configuration options:

• storybookUrl：确保此 URL 正确且可访问。例如，默认值为 http://localhost:6006，它可能不使用你正在使用的相同端口号。

  ¥storybookUrl: Ensure this URL is correct and accessible. For example, the default is http://localhost:6006, which may not use the same port number you're using.

• storybookScript：确保此脚本正确启动 Storybook。

  ¥storybookScript: Ensure this script is correctly starting Storybook.

如果在 CI 中运行测试时 URL 不起作用，你应该确保在运行测试之前构建并发布 Storybook。然后，你可以使用 storybookUrl 选项提供已发布 Storybook 的 URL。请参阅 在 CI 中 部分以获取示例。

¥If the URLs are not working when running tests in CI, you should ensure the Storybook is built and published before running the tests. You can then provide the URL to the published Storybook using the storybookUrl option. See the In CI section for an example.

如何确保我的测试可以在公共目录中找到资源？

¥How do I ensure my tests can find assets in the public directory?

如果你的故事使用公共目录中的资源，并且你没有使用默认的公共目录位置（public），则需要调整 Vitest 配置以包含公共目录。你可以通过提供 Vitest 配置文件中的 publicDir 选项 来执行此操作。

¥If your stories use assets in the public directory and you're not using the default public directory location (public), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the publicDir option in the Vitest configuration file.

如何应用自定义 Vite 配置？

¥How do I apply custom Vite configuration?

如果你在 .storybook/main.js|ts 文件中的 viteFinal 中定义了自定义操作，则需要将其转换为 Vitest 配置。这是因为插件不使用 Storybook Vite 配置。

¥If you have custom operations defined in viteFinal in your .storybook/main.js|ts file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration.

例如，要在 Storybook 的 Vite 配置中重新创建别名，你需要在 Vitest 配置中应用该别名：

¥For example, to recreate an alias in Storybook's Vite configuration, you would need to apply that alias in the Vitest configuration:

import { mergeConfig } from 'vite';
 
export default {
  // ...
  viteFinal: async (viteConfig) => {
    return mergeConfig(viteConfig, {
      resolve: {
        alias: {
          '@components': '/src/components',
          // ...
        },
      },
    });
  },
};

上面的示例将 Vite 配置放在 Vitest 配置文件中。如果你的项目是这样配置的，你也可以将其放在 Vitest 工作区文件中。

¥The above example places the Vite configuration in a Vitest configuration file. You can also place it in a Vitest workspace file, if that is how your project is configured.

如何将 Storybook 测试与其他测试隔离开来？

¥How do I isolate Storybook tests from others?

某些项目可能在其 Vite 配置中包含 test 属性。由于此插件使用的 Vitest 配置扩展了该 Vite 配置，因此 test 属性已合并。这种缺乏隔离可能会导致 Storybook 测试出现问题。

¥Some projects might contain a test property in their Vite configuration. Because the Vitest configuration used by this plugin extends that Vite config, the test properties are merged. This lack of isolation can cause issues with your Storybook tests.

要将你的 Storybook 测试与其他测试隔离，你需要将 test 属性从 Vite 配置移动到 Vitest 配置。插件使用的 Vitest 配置可以安全地扩展你的 Vite 配置，而无需合并 test 属性。

¥To isolate your Storybook tests from other tests, you need to move the test property from your Vite configuration to the Vitest configuration. The Vitest config used by the plugin can then safely extend your Vite config without merging the test property.

为什么我们推荐浏览器模式？

¥Why do we recommend browser mode?

Vitest 的浏览器模式在真实浏览器（默认配置中为 Chromium，通过 Playwright）中运行你的测试。替代方案是模拟浏览器环境，如 JSDom 或 HappyDom，与真实浏览器相比，其行为可能有所不同。对于通常依赖于浏览器 API 或功能的 UI 组件，在真实浏览器中运行测试更为准确。

¥Vitest's browser mode runs your tests in a real browser (Chromium, via Playwright, in the default configuration). The alternative is a simulated browser environment, like JSDom or HappyDom, which can have differences in behavior compared to a real browser. For UI components, which can often depend on browser APIs or features, running tests in a real browser is more accurate.

有关更多信息，请参阅 Vitest 关于有效使用浏览器模式的指南。

¥For more, see Vitest's guide on using browser mode effectively.

如何使用 WebDriver 而不是 Playwright？

¥How do I use WebDriver instead of Playwright?

我们建议使用 Playwright 在浏览器中运行测试，但你可以改用 WebDriverIO。为此，你需要调整 Vitest 配置文件中的浏览器提供程序。

¥We recommend running tests in a browser using Playwright, but you can use WebDriverIO instead. To do so, you need to adjust the browser provider in the Vitest configuration file.

如何使用 Chromium 以外的浏览器

¥How do I use a browser other than Chromium

我们建议使用 Chromium，因为它最有可能最好地匹配大多数用户的体验。但是，你可以通过调整 Vitest 配置文件中的浏览器名称 来使用其他浏览器。请注意 Playwright 和 WebDriverIO 支持不同的浏览器。

¥We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the browser name in the Vitest configuration file. Note that Playwright and WebDriverIO support different browsers.

API

导出

¥Exports

此插件具有以下导出：

¥This plugin has the following exports:

import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'

storybookTest

类型：function

¥Type: function

将你的故事转化为测试的 Vitest 插件。它接受 选项对象 进行配置。

¥A Vitest plugin that transforms your stories into tests. It accepts an options object for configuration.

选项

¥Options

该插件使用选项对象进行配置。以下是可用的属性：

¥The plugin is configured using an options object. Here are the available properties:

configDir

类型：string

¥Type: string

默认：.storybook

¥Default: .storybook

Storybook 配置所在的目录，相对于当前工作目录。

¥The directory where the Storybook configuration is located, relative to the current working directory.

如果你的 Storybook 配置 不在默认位置，你必须在此处指定位置，以便插件可以正常运行。

¥If your Storybook configuration is not in the default location, you must specify the location here so the plugin can function correctly.

storybookScript

类型：string

¥Type: string

运行 Storybook 的可选脚本。如果提供，Vitest 将在监视模式下运行时使用此脚本启动 Storybook。仅在 storybookUrl 中的 Storybook 尚不可用时运行。

¥Optional script to run Storybook. If provided, Vitest will start Storybook using this script when run in watch mode. Only runs if the Storybook in storybookUrl is not already available.

storybookUrl

类型：string

¥Type: string

默认：http://localhost:6006

¥Default: http://localhost:6006

Storybook 托管的 URL。这用于内部检查并提供 在失败时链接到测试输出中的故事。

¥The URL where Storybook is hosted. This is used for internal checks and to provide a link to the story in the test output on failures.

tags

类型：

¥Type:

{
include: string[];
exclude: string[];
skip: string[];
}

默认：

¥Default:

{
include: ['test'],
exclude: [],
skip: [],
}

标签 用于包含、排除或跳过。这些标签被定义为你的故事、元或预览中的注释。

¥Tags to include, exclude, or skip. These tags are defined as annotations in your story, meta, or preview.

• include：带有这些标签的故事将被测试

  ¥include: Stories with these tags will be tested

• exclude：带有这些标签的故事将不会被测试，并且将不计入测试结果

  ¥exclude: Stories with these tags will not be tested, and will not be counted in the test results

• skip：带有这些标签的故事将不会被测试，并且将计入测试结果

  ¥skip: Stories with these tags will not be tested, and will be counted in the test results