React实战-基于Storybook的React组件测试

拼搏现实的明天。 2022-07-18 08:40 2407阅读 0赞

React实战\-基于Storybook的React组件测试

ReactJs的测试方法和测试工具很多，主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便，其中StoryBook这款小工具很适合在页面UI直观的展示控件的允许效果，设置不同的运行场景。简单几步就能在网友上展示你的测试场景（微信：react-javascript）。

1.将storybook加入项目中

执行npm i --save @kadira/storybook,并在项目的配置文件中加入：

"scripts": \{

"storybook": "start-storybook -p 9001 -c .storybook"

\}

2.创建storybook的配置文件

storybook可以有多种不同的配置方式，但是还是采用它推荐的吧。一般单独创建.storybook的目录，创建config.js。

在配置文件中加载测试的场景文件，或者说是sotries文件。

import \{ configure \} from '@kadira/storybook';

function loadStories() \{

require('../stories/index.js');

// You can require as many stories as you need.

\}

configure(loadStories, module);

3.编写自己的测试场景

storybook提供了简单的编写测试场景的方式。如下：

storiesOf('Button', module)

.add('with text', () => (

<button onClick=\{action('clicked')\}>Hello Button</button>

))

4.运行

允许场景也很简单：npm run storybook。即可看到运行效果。

5 Demo

a.被测组件

export default class Hello extends Component\{

render()\{

return (

<input value=\{this.props.name\}> </input>

);

\}

\}

b.测试场景

storiesOf('Hello', module)

.add('Hello', () => (

<Hello name='Hello'></Hello>

))

.add('Fuck', () => (

<Hello name='Fuck'></Hello>

));

c.运行效果

![Center][]

[Center]: /images/20220717/11d7eab1baef402c9ec3324424869096.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2407人围观）

还没有评论，来说两句吧...

相关阅读

相关【React】深入理解React组件状态State

目录一、何为State 二、如何定义State 三、如何判断是否为State 四、如何正确使用State 1、用setState修改

墨蓝/ 2024年02月21日 11:20/ 0 赞/ 21 阅读

相关【React】深入理解React组件状态State

目录一、何为State 二、如何定义State 三、如何判断是否为State 四、如何正确使用State 1、用setState修改

末蓝、/ 2023年10月16日 18:06/ 0 赞/ 38 阅读

相关如何使用Jest测试你的React组件

> 在本文中，我们将了解如何使用[Jest][]（Facebook 维护的一个测试框架）来测试我们的[React][]组件。我们将首先了解如何在纯 JavaScript 函数上

落日映苍穹つ/ 2023年10月13日 19:03/ 0 赞/ 51 阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 271 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 237 阅读

相关探索----面向单元测试编写React组件

继上一篇[年轻时，我不写单元测试][Link 1]文章过后，我们开始在项目中引入了单元测试，希望能够通过单元测试提前发现问题，但是在实施中我们遇到了一个比较严重的问题： >

待我称王封你为后i/ 2022年10月01日 05:53/ 0 赞/ 187 阅读

相关 React实战-基于Storybook的React组件测试

React实战\-基于Storybook的React组件测试 ReactJs的测试方法和测试工具很多，主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便，其

拼搏现实的明天。/ 2022年07月18日 08:40/ 0 赞/ 2408 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 209 阅读

相关 react篇章-React 组件-复合组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 R

叁歲伎倆/ 2021年12月24日 15:33/ 0 赞/ 367 阅读

相关使用 react-intl 实现 React 组件国际化

> 开始之前，先了解目前常用的 React 国际化插件：[The Best Libraries for React i18n][]。因为看上去使用方法比较简单，我先选择了 [`

清疚/ 2021年09月19日 14:52/ 0 赞/ 513 阅读