reactjs – 如何使用React-Redux中的Mocha,Chai和Enzyme测试方法

当然有几个先决条件.

>您必须首先使用酶的shallow或mount函数渲染组件,具体取决于您是否需要[和/或您希望如何]嵌套子项上的simulate事件.这也为您提供了一个酶包装器,您可以从中访问组件实例及其方法.
>您需要围绕这些实例方法包装sinon test spies并使用.update重新渲染以获取可以断言的spies包装器的版本.

例：

// Import requisite modules
import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';
import { expect } from 'chai';
import PlayerList from './PlayerList';

// Describe what you'll be testing
describe('PlayerList component',() => {
  // Mock player list
  const playerList = [
    {
      id    : 1,imgUrl: 'http://placehold.it/100?text=P1',name  : 'Player One'
    }
  ];

  // Nested describe just for our instance methods
  describe('Instance methods',() => {
    // Stub the selectPlayer method.
    const selectPlayer = sinon.stub();
    // Full DOM render including nested Player component
    const wrapper = mount(
      <PlayerList playerList={ playerList } selectPlayer={ selectPlayer } />
    );
    // Get the component instance
    const instance = wrapper.instance();

    // Wrap the instance methods with spies
    instance.createListItems = sinon.spy(instance.createListItems);
    instance.onSelect        = sinon.spy(instance.onSelect);

    // Re-render component. Now with spies!
    wrapper.update();

    it('should call createListItems on render',() => {
      expect(instance.createListItems).to.have.been.calledOnce;
    });

    it('should call onSelect on child link click',() => {
      expect(instance.onSelect).to.not.have.been.called;
      wrapper.find('li > a').at(0).simulate('click');
      expect(instance.onSelect).to.have.been.calledOnce;
      expect(instance.onSelect).to.have.been.calledWith(playerList[0].id);
    });
  });
});

笔记：

>当使用上面的代码为PlayerList和Player时,我发现你没有将一个名为player的道具分配给Player;相反,你正在分配item = {item}.为了让它在本地运行,我将其更改为< Player player = {item} ... />.
>在onSelect中,您正在检查收到的i参数是否为false,然后调用selectPlayer(1).我在上面的例子中没有包含测试用例,因为逻辑关注我的原因有两个：

>我想知道我是不是0？如果是这样,它将始终评估为falsey并传递到该块.
>因为Player调用onSelect(this.props.player.id),我想知道this.props.player.id是否会被定义？如果是这样,我想知道你为什么在props.playerList中有一个没有id属性的项目.

但是如果你想像现在一样测试那个逻辑,它看起来就像这样……

onSelect中的测试逻辑示例：

describe('PlayerList component',() => {
  …
  // Mock player list should contain an item with `id: 0`
  // …and another item with no `id` property.
  const playerList = [
    …,// index 0 (Player 1)
    {  // index 1
      id    : 0,imgUrl: 'http://placehold.it/100?text=P0',name  : 'Player Zero'
    },{  // index 2
      imgUrl: 'http://placehold.it/100?text=P',name  : 'Player ?'
    }
  ];
  describe('Instance methods',{ … });
  describe('selectPlayer',() => {
    const selectPlayer = sinon.stub();
    const wrapper = mount(
      <PlayerList playerList={ playerList } selectPlayer={ selectPlayer } />
    );
    const instance = wrapper.instance();

    // There is no need to simulate clicks or wrap spies on instance methods
    // …to test the call to selectPlayer. Just call the method directly.
    it('should call props.selectPlayer with `id` if `id` is truthy',() => {
      instance.onSelect(playerList[0].id); // id: 1
      expect(selectPlayer).to.have.been.calledOnce;
      expect(selectPlayer).to.have.been.calledWith(playerList[0].id);
    });

    it('should call props.selectPlayer(1) if `id` is 0',() => {
      instance.onSelect(playerList[1].id); // id: 0
      expect(selectPlayer).to.have.been.calledTwice;
      expect(selectPlayer).to.have.been.calledWith(1);
    });

    it('should call props.selectPlayer(1) if `id` is undefined',() => {
      instance.onSelect(playerList[2].id); // undefined
      expect(selectPlayer).to.have.been.calledThrice;
      expect(selectPlayer).to.have.been.calledWith(1);
    });
  });
});