Question

我正在使用Enzyme / Jest为我的容器帽上的函数编写测试是通过复选框组件的onChange触发的。我试图模拟一个'变化'，但是，'change'不会触发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（）实际上将针对组件的道具根据您提供的事件。例如，.simulate（＆＃39;点击＆＃39;）将实际上得到onClick道具并调用它。

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

wrapper.find('Checkbox')

expect（jest.fn（））。toHaveBeenCalled（）错误

1 个答案: