前端技术文章：使用教程 - npm 包 storybook-chromatic-JavaScript中文网-JavaScript教程资源分享门户

随着现代 Web 应用程序的复杂性不断增加，前端的开发工具也在不断发展。其中一个流行的工具是 Storybook，它是一个交互式 UI 开发环境，从本质上来说可以帮助我们快速构建和测试组件。

即使 Storybook 提供了强大的构建和测试工具，但仍需要一种工具对组件进行视觉和审美上的测试。这时候，storybook-chromatic 便应运而生了。

storybook-chromatic 是一个 npm 包，它可以帮助我们创建可视化回归测试套件，以捕捉在我们进行 UI 更改时的视觉问题。

在本文中，我们将探讨如何使用 storybook-chromatic。

安装

安装 storybook-chromatic 非常简单，只需运行以下命令即可：

npm install --save-dev storybook-chromatic

安装成功后，让我们来看一下 storybook-chromatic 的配置。

配置

首先，在您的 .storybook/config.js 文件中加入以下配置：

import { addDecorator } from '@storybook/react';
import { withChromatic } from 'storybook-chromatic';

addDecorator(withChromatic());

该配置将 Storybook 和 Chromatic 连接起来，以确保在视觉回归测试期间可以正确运行。

接下来，创建一个名为 .env 的文件，并将以下内容添加到其中：

CHROMATIC_PROJECT_TOKEN=<Your Chromatic Project Token Here>

替换 <Your Chromatic Project Token Here> 为您的 Chromatic 项目的真实标识符。

现在让我们看一下，如何使用 storybook-chromatic 进行测试。

测试

首先，确保您的组件在 Storybook 中。如果没有，请按照以下示例进行安装：

import React from 'react';
import { storiesOf } from '@storybook/react';

import MyComponent from './MyComponent';

storiesOf('MyComponent', module)
  .add('Default', () => <MyComponent />);

现在，您可以使用 Chromatic 进行手动回归测试。要执行此操作，请运行以下命令：

npm run chromatic

此命令将创建一个屏幕截图集合，并将其发送到 Chromatic，以便在组件上运行测试。

story-chromatic 还为我们提供了几个可选属性来控制测试的细节：

viewports - 这个选项可以定义在每个屏幕截图中使用的视口（viewport），我们可以使用这个选项来确保我们的 UI 在不同设备上的显示效果问题，视口格式为 { width: number, height: number, deviceScaleFactor?: number, isMobile?: boolean, hasTouch?: boolean }[]。
waitBeforeScreenshot - 该选项用于配置 Chromatic 捕获屏幕截图前的等待时间，其值默认为 500。
disableAnimations - 在某些情况下，使用动画会让屏幕截图显示不同，该选项可以帮助我们禁用屏幕截图中的动画。

示例代码如下：

import React from 'react';
import { storiesOf } from '@storybook/react';

import MyComponent from './MyComponent';

storiesOf('MyComponent', module)
  .addDecorator(withChromatic({ viewports: [ { width: 320, height: 568 }, { width: 1024, height: 768 } ], waitBeforeScreenshot: 1000, disableAnimations: true }))
  .add('Default', () => <MyComponent />);

现在，您已经掌握了如何使用 storybook-chromatic 进行视觉回归测试的所有步骤。让我们来总结一下关于 storytelling-chromatic 的使用。

总结

storybook-chromatic 是一个非常有用的工具，它可以帮助我们更轻松地执行视觉回归测试。本文中，我们学习了如何安装和配置 storybook-chromatic，并详细介绍了如何在我们的项目中使用它进行回归测试。

有了 storybook-chromatic，我们可以大大提高我们的组件开发的效率，并在迭代过程中更容易地发现视觉问题。让我们在未来的项目中继续使用这个强大的工具，以提高我们的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/storybook-chromatic