Question

我试图测试在组件中的链接上发生单击动作时确实调用了某个函数。我不断收到错误 Expected mock function to have been called, but it was not called. 但是它可以在浏览器中正常工作。

我认为测试可能找不到我要它查找的id的问题，但是使用其他方法，我发现它能够很好地访问该元素。

组件

import { toggleEditMode } from './otherFile.js'
class PersonalInformation extends Component {
  constructor(props) {
    super(props);
    this.state = {editMode: false}
    this.toggleEditMode = toggleEditMode.bind(this);
  }

  render(){
   const { editMode } = this.state;
   return(
     <div>
{!editMode &&
            <div className="col-md-4 hidden-sm-down">
              <a
                id="editingToggleButton"
                className="display-block"
                role="button"
                href="javascript:void(0);"
                onClick={() => this.toggleEditMode()}
              >
                <span className="icon icon-sm dls-icon-edit" />
                <span className="pad-1-l">Edit</span>
              </a>
            </div>
          }
     </div>
)
}
}

toggleEdit方法

export function toggleEditMode() {
  this.setState({ editMode: !this.state.editMode })
}

测试

describe('edit', () => {
  it('should switch to editMode with click', () => {
  const toggleEditMode = jest.fn();
  const wrapper = mount(
    <PersonalInformation
      toggleEditMode={toggleEditMode}
    />
  );
    wrapper.find('#editingToggleButton').simulate('click');
    expect(toggleEditMode).toHaveBeenCalled();
});
}

在使用find方法时，我能够记录其发现的内容，并返回正确的元素。但是我似乎无法弄清楚“它未被称为”的原因。

Answer 1

在测试file中，您已将模拟函数分配给props，但在component中，您将其用作类函数。

因此，在测试文件中，当用户单击HTML元素时，它将触发类函数，而不是模拟的函数。

未通过酶的点击方法调用模拟功能

1 个答案: