在前端开发过程中，UI 组件测试是不可避免的一部分。在 React 生态系统中，Storybook 是一个非常流行的 UI 组件开发和测试工具。它允许开发人员在浏览器中交互式地展示他们的组件并进行一些交互测试。使用 Storybook 成功的关键点之一是能够快速开发和运行测试。在本文中，我们将介绍 @types/storybook__addon-storyshots 这个 npm 包，一个方便的工具，它可以帮助我们在测试用例中使用 Storybook。
什么是 @types/storybook__addon-storyshots
@types/storybook__addon-storyshots 是一个 TypeScript 类型定义包，它允许我们在 Jest 或 Mocha 测试框架中方便地使用 Storybook 实现自动化 UI 测试。该包是 @storybook/addon-storyshots 在 TypeScript 下的类型注释，所以对于使用 TypeScript 进行开发的开发人员来说非常便利。使用该包，我们可以创建快照测试并完全集成 Storybook。
如何安装 @types/storybook__addon-storyshots
要进行安装，你需要使用 npm 或 yarn。在你的项目根目录中，运行下列命令：
npm install --save-dev @types/storybook__addon-storyshots
yarn add -D @types/storybook__addon-storyshots
如何使用 @types/storybook__addon-storyshots
要在 Jest 或 Mocha 测试框架中使用 @types/storybook__addon-storyshots，你需要执行以下几个步骤：
1. 导入需要的文件
在你的测试文件中，你需要导入相关的函数和配置。在 Jest 或 Mocha 的测试环境中，我们需要执行下列操作：
// 测试框架必要的配置 import initStoryshots from '@storybook/addon-storyshots';
// 必要的 Storybook 配置
import { configure } from '@storybook/react';
configure(require.context('../stories', true, /\.stories\.(tsx|jsx|js|mdx)$/), module);2. 测试用例定义
可以定义 test 或 it 函数来运行测试。你可以使用以下代码：
test('Storybook Snapshots Test', initStoryshots());或者
it('Storybook Snapshots Test', initStoryshots());3. 运行测试
现在，你可以在 Jest 或 Mocha 中运行测试。执行以下命令：
npm run test
或者
yarn test
我们可以添加一些其他参数调整测试行为，如在进程上下文中使用，也可以更改快照存储目录等等。具体可参考官方文档。
示例代码
Jest
// ./__tests__/StorybookSnapshot.test.tsx
import initStoryshots from '@storybook/addon-storyshots';
import { configure } from '@storybook/react';
configure(require.context('../stories', true, /\.stories\.(tsx|jsx|js|mdx)$/), module);
test('Storybook Snapshots Test', initStoryshots());// package.json
"scripts": {
"test": "NODE_ENV=test jest",
"test:watch": "NODE_ENV=test jest --watch"
}npm install --save-dev jest identity-obj-proxy ts-jest jest-transform-stub @types/jest @types/identity-obj-proxy @types/jest-transform-stub @storybook/addon-storyshots
-- -------------------- ---- -------
-- --------------
-------------- - -
------ ------------------
---------- -
---------------- ----------
-------------- ---------------------
--
----------------- -
---------------------------------- --------------------
--
-------- -
---------- -
--------- ---------------
-
--
---------- ---------------------------------------
----------------------- ------------------ --------------- ----------
--Mocha
-- -------------------- ---- -------
-- ---------------------------------
------ -------------- ---- ------------------------------
------ - --------- - ---- -------------------
------ - ------ - ---- -------
------ - -- ---- ---- -------
----------
-
-
------------ -- -- -
---------------------------- ----- ------------
--
----- -------------------- ----- -----------
--
--
-------
--
------------------- --------- ------ -- -- -
---------- ---- --------- --------- ------ -- -- -
-------------------------- ----------------- --- -- -- -------
---
---// package.json
"scripts": {
"test": "NODE_ENV=test mocha -r ts-node/register -r src/test/test.config.ts src/test/**/*.test.ts"
}-- -------------------- ---- ------- -- ----------------------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ------ - ------ - ---- ------- ------ - ----- - ---- -------- ----------- -------- --- --------- --- ------- ------ - ----- --------- ---------------------------- ----- ------- ---------------- -
以上是一个简化的使用示例，但在实际项目中你可以根据自己的需要添加更多的参数和配置项。
小结
@types/storybook__addon-storyshots 提供了一种非常方便的方法在 Jest 或 Mocha 测试框架中处理 Storybook 运行的测试。通过添加 initStoryshots() 到测试文件我们可以创建可交互的 UI 组件测试并使用快照在运行测试时生成快照和更新策略。在你的下一个 React 项目中，使用 @types/storybook__addon-storyshots 形象地将你的组件的界面可视化，轻松开发具有高质量的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc216b5cbfe1ea0612025