.simulate(event[, ...args]) => Self

Эмулирует события на узле-корне в обёртке. Обёртка должна содержать только один узел.

Аргументы

1. event (String): Имя события, подлежащего эмуляции
2. ...args (Any [необязательно]): Объект эмуляции события, который будет передан обработчикам событий.

Возвращаемое значение

ShallowWrapper: Возвращает себя.

Пример class component

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <div className={`clicks-${count}`}>
          {count} clicks
        </div>
        <a href="url" onClick={() => { this.setState({ count: count + 1 }); }}>
          Increment
        </a>
      </div>
    );
  }
}

const wrapper = shallow(<Foo />);

expect(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.find('a').simulate('click');
expect(wrapper.find('.clicks-1').length).to.equal(1);

Пример functional component

const Foo = ({ width, height, onChange }) => (
  <div>
    <input name="width" value={width} onChange={onChange} />
    <input name="height" value={height} onChange={onChange} />
  </div>
);
Foo.propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
};

const testState = { width: 10, height: 20 };
const wrapper = shallow((
  <Foo
    width={testState.width}
    height={testState.height}
    onChange={(e) => {
      testState[e.target.name] = e.target.value;
    }}
  />
));

expect(wrapper.find('input').at(0).prop('value')).toEqual(10);
expect(wrapper.find('input').at(1).prop('value')).toEqual(20);
wrapper.find('input').at(0).simulate('change', { target: { name: 'width', value: 50 } });
wrapper.find('input').at(1).simulate('change', { target: { name: 'height', value: 70 } });
expect(testState.width).toEqual(50);
expect(testState.height).toEqual(70);

Общие подводные камни

• В настоящее время эмуляция событий для мелкого рендерера не распространяется так, как это ожидается в реальной среде. В результате необходимо вызвать .simulate() на фактическом узле, у которого установлен обработчик событий.
• Несмотря на то, что название подразумевает эмуляцию реального события, .simulate() фактически будет обращаться к свойству компонента, основываясь на переданном вами событии. Например, .simulate('click') фактически получит свойство onClick и вызовет его.
• Как указано в сигнатуре функции, передача объекта эмуляции события является необязательной. Имейте в виду, что если код, который вы тестируете, использует событие для чего-то, например, для вызова event.preventDefault() или доступа к любым его свойствам, вы должны предоставить объект эмуляции события со свойствами, необходимыми вашему коду.