reactjs - 如何将模拟对象传递给酶模拟功能？

Question

我有一个主要返回 html 的组件。所有代码都被简化以解决这个问题。

//MainRender.js
const clientId = 8;
const clientName = "Foo";

export default function MainRender(props){
  const theValue = props.value;
  function changeOnClick(elem, id, name){
    return (
      // elem: HTMLImgElement which triggers other event
      // id: number
      // name: string
      console.log(elem, id, name); 
    )
  };
    
  function helper1(arg) {
    return (
      <div className="helper1" onClick={(e) => changeOnClick(e.target.value, clientId, clientName)}>
        <span> Helper1: {arg.isHelper1} </span>
      </div>
    );
  }

  function helper2(arg) {
    return (
      <div className="helper2" >
        <span> Helper2: {arg.isHelper2} </span>
      </div>
  )};

  if(theValue.isHelper1){
    return helper1(theValue)
  } else {
    return helper2(theValue)
  }
 };

我的测试是，

import { mount } from 'enzyme';
import React from 'react';

import MainRender from './MainRender';

describe("Testing MainRender", () => {
  it("it should return true when click is fired", ()=> {
    const tempValue = {"value": {"isHelper1":true, "isHelper2": false}};
    const wrapper = mount(<MainRender {...tempValue} />); 
    const helper1 = wrapper.find('.helper1');
    const spyElem = jest.spyOn(document, 'getElementById');
    const mockElem = document.createElement('img');
    spyElem.mockReturnValue(mockElem);
    const mockHelper1 = jest.spyOn(MainRender, 'changeOnClick');
    

    helper1.simulate('click', {target: {elem:spyElem, id:7, name:'foo'});
    expect(mockHelper1.toHaveBeenCalled()).toBe(true);
 }
});

我只是想测试一下实际调用了onClick函数。我一直在阅读和研究有关的文档和示例jest，enzyme但我不确定我是否创建了正确的模拟 HTML 元素，但我一直在出错。

TypeError: Cannot read property '_isMockFunction' of undefined

如何创建模拟元素并检查点击事件？感谢您的任何建议！

标签： reactjsunit-testingjestjsenzyme