Фермент имитирует событие mousedown в компоненте реакции

Это мой первый модульный тест, и я застрял в проверке события мыши. У меня есть 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
  }
)

}

Теперь я хочу проверить это, используя шутку

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)

})

Но я получаю сообщение об ошибке TypeError: Cannot read property 'offsetX' of undefined. Подскажите, пожалуйста, как протестировать это событие?


reactjs events jestjs enzyme simulate
person user1490238    schedule 04.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Здесь асинхронное ожидание необходимо для синхронизации события 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)
  })
person user1490238    schedule 01.10.2020