Блог

Я пробовал разные способы, но, похоже, я не могу найти ничего о конкретном тестировании, вызывается ли создатель действия из компонента. Кажется, что сложная часть заключается в том, чтобы заставить работать контейнеры, подключенные к enzyme и redux. Ниже я экспортирую как подключенный, так и компонентный класс для тестов. Я попытался обернуть подключенный компонент в провайдере, но тогда я не знаю, как настроить таргетинг на текстовую область из enzyme для запуска имитируемого 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);
  });

});