开发者问题收集

预期(jest.fn())。toHaveBeenCalled()错误

2017-07-19
25537

我正在使用 Enzyme/Jest 为容器上的一个函数编写测试,该函数通过复选框组件的 onChange 触发。我试图模拟“更改”,但是不知何故,“更改”并未触发要调用的 onChange 函数。不确定这里发生了什么……我尝试将模拟更改为“单击”,删除目标对象,但仍然不起作用。

容器

export class Data extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data_list_api: [],
      selected_data: this.props.dataForm,
    };

  }

handleCheck = (event) => {
    const newSelectedData = Object.assign({}, this.state.selected_data);
    if (newSelectedData[event.target.name]) {
      delete newSelectedData[event.target.name];
    } else {
      newSelectedData[event.target.name] = [true, event.target.id];
    }
    this.setState({ selected_data: newSelectedData });
  }

render() {
    const dataOptions = this.state.data_list_api.map((val, index) => (
      <div className="form-group no-margin" key={index}>
        <div className="col-md-12">
          <div className="checkbox">
            <Checkbox
              name={val.data_name}
              id={val.data_id}
              onChange={this.handleCheck}
              checked={this.state.selected_datas[val.data_name] ? true : false}
              disabled={!this.state.selected_datas[val.data_name] && this.getObjectLength(this.state.selected_datas) > 3}
            />
          </div>
        </div>
      </div>
    ));

    return (
      <div>
       {dataOptions}
      </div>
    )
  }
}

测试

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { fromJS } from 'immutable';
import { Data } from '../index';

function setup() {
  const props = {
    submitDataForm: jest.fn(),
  }
  const wrapper = shallow(<Data {...props} />);
  return { props, wrapper };
}

it('expects handleCheck to work', () => {
const { wrapper, props } = setup();

wrapper.setState({ data_list_api: [
  { data_name: 'data1 name',
    data_id: 123 },
  { data_name: 'data2 name',
    data_id: 234 },
  { data_name: 'data2  name',
    data_id: 345 }],
});

wrapper.instance().handleCheck = jest.fn();

wrapper.update();

wrapper.find('.checkbox').first().simulate('change', { target: { checked: true } });

expect(wrapper.instance().handleCheck).toHaveBeenCalled();
expect(wrapper).toMatchSnapshot();


});

错误

 expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

  at Object.<anonymous> (app/containers/Schools/tests/index.test.js:95:44)
      at Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:169:7)

任何帮助都将不胜感激!

1个回答

问题在于您的选择器 wrapper.find('.checkbox').first() 。这将触发 <div className="checkbox"> 上的事件。但此元素没有事件侦听器,并且 .simulate 的行为不像真实事件,因此它不会传播。来自文档:

Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set. Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

要解决此问题,您必须选择附加了点击处理程序的组件:

wrapper.find('Checkbox')
Andreas Köberle
2017-07-20