期望(jest.fn()).toHaveBeenCalled() 错误

Question

我正在使用 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)

任何帮助将非常感激！

Answer 1

问题是你的选择器wrapper.find('.checkbox').first()。这将触发 上的事件<div className="checkbox">。但该元素没有事件侦听器，并且其.simulate行为与真实事件不同，因此它不会传播。来自文档：

目前，浅渲染器的事件模拟并不像人们在真实环境中通常期望的那样传播。因此，必须在设置了事件处理程序的实际节点上调用 .simulate()。尽管名称暗示这会模拟实际事件，但 .simulate() 实际上会根据您提供的事件来定位组件的 prop。例如， .simulate('click') 实际上会获取 onClick 属性并调用它。

要解决此问题，您必须选择附加了单击处理程序的组件：

wrapper.find('Checkbox')