今天补上上次新闻客户端欠下的单元测试。新闻客户端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）的更多相关文章

  1. React-Native（三）：React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

  2. 一个 React & Redux的目录树

    |-----------------------------------------| | | | React & Redux | | | |------------------------- ...

  3. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  4. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  5. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  6. 写了一个基于React+Redux的仿Github进度条

    曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...

  7. 基于React实现的【绿色版电子书阅读器】，支持离线下载

    代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com ...

  8. 基于React和Node.JS的表单录入系统的设计与实现

    一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...

  9. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  10. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

随机推荐

  1. 【翻译】FluentValidation验证组件的使用

    由于本文是翻译,所以将原文原原本本的搬上来,大家看原文有什么不懂的也可以对照这里. 给出地址:https://fluentvalidation.net/ FluentValidation fluent ...

  2. laravel 关联中的预加载

    预加载 当作为属性访问 Eloquent 关联时,关联数据是「懒加载」的.意味着在你第一次访问该属性时,才会加载关联数据.不过,是当你查询父模型时,Eloquent 可以「预加载」关联数据.预加载避免 ...

  3. Oracle 内存参数调优设置

    Oracle 数据库系统中起到调节作用的参数叫初始化参数,数据库管理员根据实际情况需要适当调整这些 初始化参数以优化Oracle系统. 1 主要系统参数调优介绍 2 系统内存参数的分配 2.1 Ora ...

  4. C# Note24： 指针的使用

    C#为了类型安全,默认并不支持指针.但是也并不是说C#不支持指针,我们可以使用unsafe关键词,开启不安全代码(unsafe code)开发模式.在不安全模式下,我们可以直接操作内存,这样就可以使用 ...

  5. C# Note19: Windows安装包制作实践

    前言 最近在项目中需要不断更新新版本的software installer(软件安装包),于是便查阅资料,整理了下制作方法. NSIS安装包制作脚本 NSIS(Nullsoft Scriptable ...

  6. Flutter之Container详解

    1 基本内容1.1 继续关系Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget &g ...

  7. list类型功能剖析

    append  向后追加 name_list=["eirc","alex","tony"] name_list.append('seven' ...

  8. git放弃修改，强制覆盖本地代码

    $ git fetch --all $ git reset --hard origin/master $ git pull

  9. Ehlib(Delphi控件) v9.2.024 D7-XE10.2 免费绿色特别版

    下载地址:https://www.jb51.net/softs/579413.html#downintro2 EHLib是一个DELPHI 下的非常棒的第三方Grid控件,比DELPHI自带的强大许多 ...

  10. maven配置，jdk1.8

    <!-- 局部jdk配置,pom.xml中 --> <build> <plugins> <plugin> <groupId>org.apac ...