如何断言是否已从redux连接的容器组件调用操作创建者

时间:2016-10-11 02:37:15

标签: reactjs redux react-redux enzyme redux-thunk

我尝试了各种各样的方法但是我似乎无法找到任何关于如果从组件中调用动作创建者的具体测试。困难的部分似乎是让酶和redux连接容器起作用。下面我导出了连接和组件类以进行测试。我尝试在提供者中包装连接的那个,但后来我不知道如何从酶中定位textarea以触发模拟的onChange。以下是有效的,但我不确定这是否是最佳方式?

简单容器:

我想声明onChange会使用正确的值调用sendCommandValueChange。

import React, { Component }  from 'react';
import { connect } from 'react-redux'; 
import { sendCommandValueChange } from 'actions';

export class RobotCommand extends Component {
  handleCommandChange(e){
    this.props.sendCommandValueChange(e.target.value);
  }
  render(){ 
    return (
      <div>
        <textarea 
          onChange={ e => this.handleCommandChange(e)}
        />
      </div>
    );
  }
}

export default connect(null, { sendCommandValueChange })(RobotCommand);

,这是测试:

import React from 'react';
import { expect } from 'chai';
import sinon from 'sinon';
import { shallow, mount } from 'enzyme';
import { RobotCommand } from './RobotCommand';

describe('RobotCommand', () => {

  it('should call sendCommandValueChange action creator on value change', () => {
    const props = { sendCommandValueChange: sinon.spy() };
    const wrapper = shallow(<RobotCommand {...props} />);
    wrapper.find('textarea').simulate('change', {target: {value: 'foo'}});
    expect(props.sendCommandValueChange.calledWith('foo')).to.equal(true);
  });

});

0 个答案:

没有答案