react-redux单元测试(基于react-addons-test-utils,mocha）

今天补上上次新闻客户端欠下的单元测试。新闻客户端github地址：点我，接上篇博客。

本次单元测试用到了单元测试比较流行的测试框架mocha，用到的是expect断言库，和react官方的测试插件：react-addons-test-utils。

那本次单元测试的地址在github上另起一个分支，来区别一下两次提交。本次单元测试地址：点我

npm install && npm test 即可测试该项目

通过本次单元测试，不仅添加了测试，还发现了原先作品的一些问题，这也是函数式编程所注意的地方。

这是test文件夹的目录：

和redux官方例子的目录是一样的，我仅仅把内容改了一下。

react-redux的作品相对来说还是很好写测试的，由于redux是函数式编程的思想，关于redux的单元测试就像测试js函数一样方便。麻烦的就是react的测试，它需要模拟用户的操作，而且还需要区分虚拟dom和真实dom，在测试的时候我们会把它渲染在真实dom当中。

那么问题来了，测试环境并没有浏览器的dom环境，没有window，document这些东西咋办呢，node有个包叫jsdom，我们在测试之前，先用jsdom模拟一下浏览器的环境：

import { jsdom } from 'jsdom'
 
global.document = jsdom('<!doctype html><html><body></body></html>')
global.window = document.defaultView
global.navigator = global.window.navigator

一些jsdom的api的应用，其中模拟了document，window和navigator，怎么把它添加到测试中呢？

我们再看一下测试mocha的测试命令，摘抄自package.json

 "scripts": {
    "start": "node server.js",
    "test": "NODE_ENV=test mocha --recursive --compilers js:babel-core/register --require ./test/setup.js",
    "test:watch": "npm test -- --watch"
  },

首先设置NODE_ENV,关于webpack热启动，如果是winodws用户遇到NODE_ENV不是命令请看关于windows下NODE_ENV=test无效的情况解决办法

启动mocha -h可以看到--require来加载setup.js也就是jsdom模拟的环境。这句命令就是先把这些文件通过babel编译一下，再引入jsdom模拟环境。

那我们开始正式来说测试吧。

看目录可知，我们测试分4个部分，测试actions，components，containers，reducers

与redux有关的就是actions和reducers，components是测试组件是否正确调用了该方法，containers是测试组件是否正常工作。后面2个都是react-redux的东西啦，跟我们函数式的redux可没关系。

我们先把函数式的redux的相关测试写上--

一，测试actions

我们需要知道每个actionCreator是否正确了返回action，我觉得这东西用眼就能看出来。。真是没有必要测试，不过人家官网写了，我也写上吧。

顺便说一句，expect断言库真的是蛮好用的，和chai的expect类似。推荐一下expect和chai。

import expect from 'expect'
import * as actions from '../../actions/counter'
 
describe('actions', () => {
  it('increment1 should create increment1 action', () => {
    expect(actions.increment1()).toEqual({ type: actions.LOVE_COUNTER_ONE })
  })
  it('increment2 should create increment1 action', () => {
    expect(actions.increment2()).toEqual({ type: actions.LOVE_COUNTER_TWO })
  })
  it('increment3 should create increment1 action', () => {
    expect(actions.increment3()).toEqual({ type: actions.LOVE_COUNTER_THREE })
  })
 
  it('text1 should create text1 action', () => {
    expect(actions.text1("any1")).toEqual({ type: actions.TXST_COUNTER_ONE,text:"any1" })
  })
  it('text2 should create text1 action', () => {
    expect(actions.text2("any2")).toEqual({ type: actions.TXST_COUNTER_TWO,text:"any2" })
  })
  it('text3 should create text1 action', () => {
    expect(actions.text3("any3")).toEqual({ type: actions.TXST_COUNTER_THREE,text:"any3" })
  })
 
  it('hf1 should create hf1 action', () => {
    expect(actions.hf1(1,"any1")).toEqual({ type: actions.HF_COUNTER_ONE,id:1,hf:"any1" })
  })
  it('hf2 should create hf1 action', () => {
    expect(actions.hf2(2,"any2")).toEqual({ type: actions.HF_COUNTER_TWO,id:2,hf:"any2" })
  })
  it('hf3 should create hf1 action', () => {
    expect(actions.hf3(3,"any3")).toEqual({ type: actions.HF_COUNTER_THREE,id:3,hf:"any3"})
  })
})

二，测试reducers

　　reducers也比较简单，首先引入reducers文件和相关action

import expect from 'expect'
import {counter} from '../../reducers/counter'
import {content} from '../../reducers/counter'
import { LOVE_COUNTER_ONE,LOVE_COUNTER_TWO,LOVE_COUNTER_THREE } from '../../actions/counter'
import { TXST_COUNTER_ONE,TXST_COUNTER_TWO,TXST_COUNTER_THREE } from '../../actions/counter'
import { HF_COUNTER_ONE,HF_COUNTER_TWO,HF_COUNTER_THREE } from '../../actions/counter'

首先是counter的测试，它功能是啥来？就是点击心♥，♥后面的数字会加，然后根据心来排序。

describe('reducers', () => {
  describe('counter', () => {
    const initailState={
      one:{id:1,counter:0,title:"好险，库里将到手的锅一脚踢飞！",time:1 },
      two:{id:2,counter:0,title:"中国男足赔率1：501！",time:42},
      three:{id:3,counter:0,title:"为什么要善待高洪波和宫鲁鸣",time:1}
    };
    it('should handle initial state', () => {
      expect(counter(undefined, {})).toEqual(initailState);
    })
 
    it('should handle LOVE_COUNTER_ONE', () => {
      const state={
        one:{id:1,counter:1,title:"好险，库里将到手的锅一脚踢飞！",time:1 },
        two:{id:2,counter:0,title:"中国男足赔率1：501！",time:42},
        three:{id:3,counter:0,title:"为什么要善待高洪波和宫鲁鸣",time:1}
      };
      expect(counter(initailState, { type: LOVE_COUNTER_ONE })).toEqual(state);
    })
 
    it('should handle LOVE_COUNTER_TWO', () => {
      const state={
        one:{id:1,counter:0,title:"好险，库里将到手的锅一脚踢飞！",time:1 },
        two:{id:2,counter:1,title:"中国男足赔率1：501！",time:42},
        three:{id:3,counter:0,title:"为什么要善待高洪波和宫鲁鸣",time:1}
      };
      expect(counter(initailState, { type: LOVE_COUNTER_TWO })).toEqual(state);
    })
 
    it('should handle LOVE_COUNTER_THREE', () => {
      const state={
        one:{id:1,counter:0,title:"好险，库里将到手的锅一脚踢飞！",time:1 },
        two:{id:2,counter:0,title:"中国男足赔率1：501！",time:42},
        three:{id:3,counter:1,title:"为什么要善待高洪波和宫鲁鸣",time:1}
      };
      expect(counter(initailState, { type: LOVE_COUNTER_THREE })).toEqual(state);
    })
    it('should handle unknown action type', () => {
      expect(counter(initailState, { type: 'unknown' })).toEqual(initailState);
    })
  })

看代码这么多，其实主要的代码就几句，首先给reducer一个初始state。

然后期望传入初始state，传入每个action.type得到不同的state。就像普通的js函数那么好测试。

expect(counter(initailState, { type: LOVE_COUNTER_THREE })).toEqual(state);

type是每个action的type，看是不是toEqual改变后的state。

当时我在这里出错了，写单元测试，怎么改都不对，mocha提示我说那里出错了，真是一找就找到错误了（再次推荐抹茶~）

原来是我的reducers不”纯“。（错误的代码不影响效果，但是是错误的，错误代码可以看本github的master分支）

函数式编程的要求就是函数要纯。restful的API大火，它强调状态要幂等。类似函数的“纯”。

我看了一下第一个确实有问题，这里上一下代码片段:

 return Object.assign({},state,{one:{id:1,counter:++state.one.counter,title:state.one.title,time:state.one.time }})

虽然我用了assign函数保证了state是不变的，但是还是顺手写了个++，然后state就变了。晕。。然后就改为了+1，测试果然过了。

然后第二个就郁闷了，第二个仔细看确实没啥问题，大家看出哪不纯了么？

 const newState=state.concat();
 newState[0].push({text:action.text,huifu:[]})
 return newState;
 // var data=[
 //      [
 //         {
 //            text:"这里是评论1",
 //            huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx']
 //          },
 //         {
 //            text:"这里是评论1.2",
 //            huifu:["huifuxxxxxxxxxxxxx"]
 //          }
 //      ],[
 //          {
 //            text:"这里是评论2",
 //            huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx']
 //          }
 //      ],[
 //          {
 //            text:"这里是评论3",
 //            huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx']
 //          }
 //        ]
 //    ]
/*

其实你只看reducer代码是看不出啥的，state是个数组，我concat()复制一个数组，再操作复制后的newState，有啥问题？？

然而固执的单元测试就说我这不纯，。后来仔细看才发现，确实不纯。。

newState.push(xxxx)，ok没问题，纯的，newState[0].push(xxx)，不行，不纯了，state已经改变了。好吧，确实改变了。因为数组里面的数组没复制，newState还是引用原来的地址。。

于是牵扯到对象的深克隆。。于是手写了一个深克隆，果然测试通过了。上一次我的deepClone:

function deepClone(obj){
  var res=Array.isArray(obj)?[]:{};
  for(var key in obj){
    if (typeof obj[key]=="object") {
      res[key]=deepClone(obj[key]);
    }else{
      res[key]=obj[key];
    }
  }
  return res;
}

这里巧妙地用了typeof的坑，typeof obj和array都会返回“object”。

然后reducer的state.concat（）就变成了deepClone(state);

三，测试components

这个是测试compoents的，就是说测试react组件的运行情况，原理就是看它是不是dispatch了相应事件。

首先引入react-addons-test-utils，和Counter组件，还findDOMNode，这是react提供的获得真实组件的方法，现在被转移到react-dom里面，后来又推荐用refs获取真实dom了，包括在

react-addons-test-utils API上面都是用的refs。

import expect from 'expect'
import React from 'react'
import TestUtils from 'react-addons-test-utils'
import Counter from '../../components/Counter'
import {findDOMNode} from 'react-dom'

react-addons-test-utils有啥用呢？该api地址：点我

列出我们用到的方法：

renderIntoDocument（） //渲染组件到真实dom环境

scryRenderedDOMComponentsWithClass（） //从渲染的dom环境中根据class选取真实dom，它的结果是个结果集

　　　　　　　　　　　　　　　　　　　　　　//相对的还有findRenderedDOMComponentsWithClass，不同的是它结果只有一个而已

Simulate.click() //模拟用户点击

Simulate.change() //用于改变对应dom

准备活动~

function setup() {
  const actions = {
    increment1: expect.createSpy(),
    increment2: expect.createSpy(),
    increment3: expect.createSpy(),
 
    text1: expect.createSpy(),
    text2: expect.createSpy(),
    text3: expect.createSpy(),
 
    hf1: expect.createSpy(),
    hf2: expect.createSpy(),
    hf3: expect.createSpy()
  }
  const initailCounter={
    one:{id:1,counter:0,title:"xxxx" ,time:1},
    two:{id:2,counter:0,title:"xxxx", time:1},
    three:{id:3,counter:0,title:"xxxx",time:1}
  }
  const initailContent=[
       [{text:"这里是评论1",huifu: ["huifuxxxxxxxxxxxxx"] },{text:"这里是评论1.2",huifu:[]}],
       [{text:"这里是评论2",huifu:["huifuxxxxxxxxxxxxx"]}],
       [{text:"这里是评论3",huifu:["huifuxxxxxxxxxxxxx"]} ]
   ];
  const component = TestUtils.renderIntoDocument(<Counter content={initailContent} counter={initailCounter} {...actions} />)
  return {
    component: component,
    actions: actions,
    heart:TestUtils.scryRenderedDOMComponentsWithClass(component,"heart"),
    heartNum: TestUtils.scryRenderedDOMComponentsWithClass(component, 'heart')
  }
}

expect.createSpy()创建一个可以追踪的函数，用这个可以看到它是不是被调用了。

然后是TestUtils.renderIntoDocument(<Counter content={initailContent} counter={initailCounter} {...actions} />)；

渲染完组件，导出一些用到的东西，heart是渲染组件里的class为heart的dom，点击它心会+1；heartNum就是存放心数量的div啦。

describe('Counter component', () => {
  it('should display heart number', () => {
    const { heartNum } = setup()
    expect(heartNum[0].textContent).toMatch(/^0/g)
  })
 
  it('click first heart should call increment1', () => {
    const { heart, actions } = setup()
    TestUtils.Simulate.click(heart[0])
    expect(actions.increment1).toHaveBeenCalled()
  })
 
  it('pinglun2 buttons should call text2', () => {
    const {actions,component } = setup()
     const realDom=findDOMNode(component);
     const plbtn=realDom.querySelectorAll('.plbtn');
    TestUtils.Simulate.click(plbtn[1])
    const pingl=TestUtils.scryRenderedDOMComponentsWithClass(component, 'pingl');
    TestUtils.Simulate.click(pingl[0]);
    expect(actions.text2).toHaveBeenCalled()
  })
 
  it('huifu3 button should call hf3', () => {
    const { actions,component } = setup()
    const realDom=findDOMNode(component);
     const plbtn=realDom.querySelectorAll('.plbtn');
    TestUtils.Simulate.click(plbtn[2]);//点击评论
      const hf=TestUtils.scryRenderedDOMComponentsWithClass(component, 'hf');
    TestUtils.Simulate.click(hf[0]);//点击回复
    const hfBtn=TestUtils.scryRenderedDOMComponentsWithClass(component, 'hf-btn');
    TestUtils.Simulate.click(hfBtn[0]);//点击回复
    expect(actions.hf3).toHaveBeenCalled()
  })
})

第一个希望心的数量match 0，初始化的时候。然后是模拟点击，点击心会触发increment1，点击评论2号的评论的提交按钮会调用text2方法。点击回复3号的按钮会触发hf3方法。

就是自己点击写期望的结果，就像真正在点击浏览器一样，不多说了。

注意一点，scryRenderedDOMComponentsWithClass支持的css选择器很少，一般可以用findDOMNode这个东西，找到该渲染后的dom，用querySelectorAll就方便多了。

四，测试containers

这个测试就像是测试了，，它是关注你组件的结果，不管程序咋样，我满足你的条件，你得给我我想要的结果。

原理就是把组件渲染到dom里，dispatch一下，然后查看结果。结果咋查看？就看该出现评论的地方有没有输入的字样。match匹配一下。

准备工作~

import expect from 'expect'
import React from 'react'
import TestUtils from 'react-addons-test-utils'
import { Provider } from 'react-redux'
import App from '../../containers/App'
import configureStore from '../../store/configureStore'
import { findDOMNode } from "react-dom"

看到了，我们在这个测试里面直接把react-redux那一套创建store的方法拿出来了。

function setup(initialState) {
  const store = configureStore(initialState)
  const app = TestUtils.renderIntoDocument(
    <Provider store={store}>
      <App />
    </Provider>
  )
  return {
    app: app,
    heart: TestUtils.scryRenderedDOMComponentsWithClass(app, 'heart'),
    heartNum: TestUtils.scryRenderedDOMComponentsWithClass(app, 'heart')
  }
}

把组件渲染进去，开始测试。

也是蛮简单的。我这里就只测试评论和回复的功能了。

  const { buttons, p,app } = setup()
  const realDom=findDOMNode(app);
  const plbtn=realDom.querySelectorAll('.plbtn');
  TestUtils.Simulate.click(plbtn[0]);//点击评论
  const plInput=realDom.querySelectorAll(".pl-input")[0];
  plInput.value="any111";
  TestUtils.Simulate.change(plInput);//input输入any111
  const pingl=TestUtils.scryRenderedDOMComponentsWithClass(app, 'pingl');
  TestUtils.Simulate.click(pingl[0]);//点击提交
  const text=realDom.querySelectorAll('.body-text p');
  expect(text[text.length-1].textContent).toMatch(/^any111/)

这里只列出测试评论的代码吧。

和上个一样，乱七八糟的获取dom，然后模拟点击，这里用到了模拟输入，plInput.value="any111";TestUtils.Simulate.change(plInput);

固定api，没啥好说的。其实还有好几个测试，我只是写了代表性的一部分。剩下的都是雷同的，就不写了~

完毕~谢谢~

react-redux单元测试(基于react-addons-test-utils,mocha）的更多相关文章

React-Native（三）：React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
一个 React & Redux的目录树
|-----------------------------------------| | | | React & Redux | | | |------------------------- ...
React Native 系列(二) -- React入门知识
前言本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
写了一个基于React+Redux的仿Github进度条
曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...
基于React实现的【绿色版电子书阅读器】，支持离线下载
代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器在线地址:http://myreader.linxins.com ...
基于React和Node.JS的表单录入系统的设计与实现
一.写在前面这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景人活着一定要有信仰,没有 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

随机推荐

VS2015 + OPENCV + CUDA 安装流程
VS2015 https://blog.csdn.net/guxiaonuan/article/details/73775519?locationNum=2&fps=1 OPENCV htt ...
PhpStorm本地断点调试
一.断点调试php环境搭建 1.检测本地php环境是否安装了Xdebug 在本地输出phpinfo():搜索Xdebug;如下图如果没有安装,安装操作Xdebug如下: 将phpinfo();的信 ...
app自动化测试Appium+python
一.node.js安装 https://nodejs.org/en/download/ ##一直下一步 ###cmd查看二. .NET Framework安装 https://www.micros ...
shit iview docs & i-radio bug
shit iview docs & i-radio bug https://github.com/iview/iview/issues/5627 <i-row> <i-col ...
list类型功能剖析
append 向后追加 name_list=["eirc","alex","tony"] name_list.append('seven' ...
相识mongodb
1.下载完安装包,并解压下载地址:https://www.mongodb.org/dl/linux/x86_64或者可以直接wget http://fastdl.mongodb.org/linux/m ...
vim的几个常用操作
现在很少会有人用vim来写代码,所以vim更常用在server上面编辑配置文件或者少量代码编辑: vim操作命令非常之多,如果仅用作一个配置文件的编辑器,掌握几个常用的操作就够了: 常用的操作其实就是 ...
CodeForces - 1051D Bicolorings(DP)
题目链接:http://codeforces.com/problemset/problem/1051/D 看了大佬的题解后觉着是简单的dp,咋自己做就做不来呢. 大佬的题解:https://www.c ...
通过流量清理防御DDoS
导读在2018年2月,世界上最大的分布式拒绝服务(DDoS)攻击在发起20分钟内得到控制,这主要得益于事先部署的DDoS防护服务. 这次攻击是针对GitHub–数百万开发人员使用的主流在线代码管理服 ...
[代码]--给任意网站添加聊天功能，随时聊（fa）天（che）
感谢“topurl.cn”制作此功能并分享. 这是一段代码,在打开的网页中使用,可以加载一个外挂形式的聊天室功能, 就可以和同样访问此网站进行相同操作的网友进行聊(fa)天(che)了. 使用方法: ...

react-redux单元测试(基于react-addons-test-utils,mocha）

react-redux单元测试(基于react-addons-test-utils,mocha）的更多相关文章

随机推荐

热门专题