酶在反应组件中模拟mousedown事件

Question

这是我的第一个单元测试，我一直在测试鼠标事件。我有一个 div 鼠标按下时我获取 offsetX 和 offsetY 并将该值存储在状态中。

<div
      className={`outputCanvasHolder ${
        this.props.output.selection === "CLICK"
          ? "showOutput"
          : "hideOutput"
      }`}
      onMouseDown={e => {
        this.handleMouseDown(e.nativeEvent)
      }}
      onMouseMove={e => {
        this.handleMouseMove(e.nativeEvent)
      }}
      onMouseUp={e => {
        this.handleMouseUp(e.nativeEvent)
      }}
    >My div</div>

handleMouseDown = primitive => {
this.setState(
  {
    dragStartX: primitive.offsetX,
    dragStartY: primitive.offsetY
  }
)

}

现在我想用 jest 来测试它

it("mouse down event", () => {
props.output.selection = "CLICK"
const wrapper = shallow(<ReAlignedImageCanvas {...props} />)
const canvasDiv = wrapper.find(".showOutput")
console.log(canvasDiv.debug())
canvasDiv.simulate("mousedown", {
  target: {
    name: "dragStartX",
    value: 100
  }
})
expect(wrapper.find(".test"))
expect(wrapper.find(".test-100").length).to.equal(1)

})

但我收到错误类型错误：无法读取未定义的属性 'offsetX'。你能告诉我如何测试这个事件吗

Answer 1

这里需要asyn await来同步mouseDown事件。组件应该挂载。事件应该是一个模拟函数。应该对元素调用鼠标事件。应该模拟偏移值。

 it("mouse down event", async () => {
    const mockCallBack = jest.fn()
    props.output.selection = "CLICK"
    props.canvas.allPrimitives = true
    const wrapper = mount(
      <ReAlignedImageCanvas onMouseDown={mockCallBack} {...props} />
    )

    await wrapper.find(".showOutput").invoke("onMouseDown")(
      {
        nativeEvent: {
          offsetX: 200,
          offsetY: 180
        }
      },
      9000
    )
    expect(wrapper.state("dragStartX")).toBe(200)
    expect(wrapper.state("dragStartY")).toBe(180)
  })

酶在反应组件中模拟mousedown事件

Enzyme simulate mousedown event in react component

events

simulate

reactjs

jestjs

enzyme