React 通过 storybook 进行单元测试

安装下面的包

npm install --save @storybook/react
npm install --save @storybook/addon-actions
npm install --save @storybook/addon-links
npm install --save @storybook/addons

在package.json平级目录下放置.storybook文件夹

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook

文件夹内放置文件

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook/config.js

import { configure } from '@storybook/react';

const req = require.context("../src", true, /.*.stories.js/);

function loadStories() {

  req.keys().forEach(filename => req(filename));

}

configure(loadStories, module);

const req = require.context(“../src”, true, /.*.stories.js$/);

会帮助扫描src文件夹内任意位置 ( 包含所有递归子路径 ) 下的 *.storiest.js 文件

然后我们尝试添加一个helloworld文件

/Users/lizhe/Documents/DEV/projects/es6/study/app/src/lz/lztest.stories.js

import React from "react";

import { storiesOf } from "@storybook/react";

 

storiesOf("lztest", module).add("Lz test 2", () => (

    <div>hello world 2</div>

));

最后来看一下package.json文件

{

  "name": "app",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@storybook/addon-actions": "^3.4.8",

    "@storybook/addon-links": "^3.4.8",

    "@storybook/addons": "^3.4.8",

    "@storybook/react": "^3.4.8",

    "react": "^16.4.1",

    "react-dom": "^16.4.1",

    "react-scripts": "1.1.4",

    "recompose": "^0.27.1"

  },

  "scripts": {

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

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  }

}

启动命令为

npm run storybook

如果需要引入css文件可以直接定义在config.js中

import { configure } from “@storybook/react”;

import “../src/css/”;

import “./style.css”;