Reactjs 如何测试与Ant Design的交互'；Popover的内容是什么？

我有一个React组件，它包装了一个Ant设计的Popover。该组件获取一个回调，用户交互（比如单击）在动态生成的内容中调用该回调。类似于此：

const{Popover，Button}=antd；
const popopoverextended=（{onWhatever，children}）=>{
常量handleClick=（事件）=>{
如果（event.target.className==='some class'）{
onwhere（event.target.dataset.value）；
}
};
const dynamic=（）=>“单击此文本”；
常量内容=（）=>{
返回(
一些HTML

);
};
返回(
{儿童}
);
};
ReactDOM.render(
console.log（x）}>
点击我
,
document.getElementById（'root'））
);
酶看不到动态内容，因此您无法模拟单击动态内容中的元素。您可以通过执行
console.log（wrapper.debug（））
来验证这一点，它将显示Ezyme看到的内容。尝试后：

const mockCallback = jest.fn();
const wrapper = mount(<PopoverExtended onWhatever={mockCallback}>{<Button>Mock me</Button>}</PopoverExtended>);

const trigger = wrapper.find("button");
trigger.simulate("click");

现在调用
wrapper.html（）
实际上会返回完整的DOM，包括动态内容，但正如您所提到的，这对于我们的案例来说是非常无用的。为了保护酶，动态内容使用html风格而不是JSX（
class
而不是
className
），这使得它更难包装

这样一来，我不明白为什么需要在测试场景中包含动态内容。只需在主机上模拟
单击
div
。事实上，我认为这样做是正确的，因为您在主机
div
上定义了事件处理程序，而不是在动态内容中：

it(`<PopoverExtended /> interaction`, () => {
  const mockCallback = jest.fn();
  const wrapper = mount(<PopoverExtended onWhatever={mockCallback}>{<Button>Mock me</Button>}</PopoverExtended>);
  const mockEvent = {
    type: "click",
    target: {
      dataset: { value: 42 },
      className: "some-class"
    }
  };

  const trigger = wrapper.find("button");
  trigger.simulate("click");

  const hostDiv = wrapper.find("div.trigger-wrapper");
  hostDiv.simulate("click", mockEvent);

  expect(mockCallback.mock.calls.length).toBe(1);
  expect(mockCallback.mock.calls[0][0]).toBe(42);
});

it（`interaction`，（）=>{
const mockCallback=jest.fn（）；
const wrapper=mount（{Mock me}）；
常量mockEvent={
键入：“单击”，
目标：{
数据集：{value:42}，
类名：“某个类”
}
};
常量触发器=wrapper.find（“按钮”）；
触发器。模拟（“单击”）；
const hostDiv=wrapper.find（“div.trigger-wrapper”）；
hostDiv.simulate（“单击”，mockEvent）；
expect（mockCallback.mock.calls.length）.toBe（1）；
expect（mockCallback.mock.calls[0][0]）toBe（42）；
});

选项2

有趣的是，react测试库在包含动态内容时没有问题，因此您可能希望使用它而不是酶：

import React from "react";
import { render, fireEvent, screen } from '@testing-library/react'
import { Button } from "antd";

import PopoverExtended from "./PopOverExtended";

it(`<PopoverExtended /> interaction`, async () => {
  const mockCallback = jest.fn();
  
  render(<PopoverExtended onWhatever={mockCallback}>{<Button>Mock me</Button>}</PopoverExtended>);

  fireEvent.click(screen.getByText('Mock me'))    
  fireEvent.click(screen.getByText('Click this text'))

  expect(mockCallback.mock.calls.length).toBe(1);
  expect(mockCallback.mock.calls[0][0]).toBe("42");
});

从“React”导入React；
从'@testing library/react'导入{render，firevent，screen}
从“antd”导入{Button}；
从“/popopoverextended”导入PopoverExtended；
它（`interaction`，async（）=>{
const mockCallback=jest.fn（）；
渲染（{Mock me}）；
firevent.click（screen.getByText（'Mock me'））
fireEvent.click（screen.getByText（“单击此文本”））
expect（mockCallback.mock.calls.length）.toBe（1）；
expect（mockCallback.mock.calls[0][0]）toBe（“42”）；
});

<>这个论点是<代码> DataSet < /C>是由动态内容定义的，因此您必须在测试中考虑它。

import React from "react";
import { render, fireEvent, screen } from '@testing-library/react'
import { Button } from "antd";

import PopoverExtended from "./PopOverExtended";

it(`<PopoverExtended /> interaction`, async () => {
  const mockCallback = jest.fn();
  
  render(<PopoverExtended onWhatever={mockCallback}>{<Button>Mock me</Button>}</PopoverExtended>);

  fireEvent.click(screen.getByText('Mock me'))    
  fireEvent.click(screen.getByText('Click this text'))

  expect(mockCallback.mock.calls.length).toBe(1);
  expect(mockCallback.mock.calls[0][0]).toBe("42");
});