Reactjs 在CardHeader Avatar={}中测试更改复选框时遇到问题

我已经实现了一些类似于提供的示例的东西。我在访问avatar={}中的复选框时遇到问题。该项目正在使用Jest/酶进行测试。为简单起见，下面的示例直接来自他们添加了id的文档。我已将id添加到我要测试的内容中，以使.find函数更易于使用

export interface IListItem {
   itemId: number;
   itemName: string;
   isChecked: boolean;
}

interface IProps {
   listName: string;
   list: IListItem[];
   setList: any;
}

function checkAllItems(function checkAllItems(check: boolean, list: IListItem[], setList: any) {
   let tempList = [...list];
   for (var item of tempList) {
      item.isChecked = check;
   }
   setList(tempList);
}

export function ToggleableListComponent({ listName, list, setList }: IProps) {
  return (
    <CardHeader
       id="check-all-card"
       avatar={
         <Checkbox
           id="check-all"
           checked={areAllItemsChecked(list)}
           onChange={(e) => checkAllItems(e.target.checked, list, setList)}
         />
       }
       title={listName}
       subheader={`${numberOfChecked(list)}/${list.length} selected`}
  />)}

导出接口IListItem{
itemId：编号；
itemName:string；
isChecked：布尔型；
}
接口IProps{
listName:string；
清单：IListItem[]；
集合列表：任何；
}
函数checkAllItems（函数checkAllItems（check:boolean，list:IListItem[]，setList:any）{
让圣堂武士=[…列表]；
for（圣堂武士的var项目）{
item.isChecked=检查；
}
设置列表（圣殿骑士）；
}
导出函数ToggleableListComponent（{listName，list，setList}:IProps）{
返回(
}
title={listName}
子标题={${numberOfChecked（list）}/${list.length}选中`}
/>)}

我正试图通过.find酵素功能访问复选标记，以最终模拟变化

it("Tests checking all items in list", () => {
   let defaultProps = {
      listName: "test",
      list: [] as IListItem[],
      setList: jest.fn(),
   }
    const mockedEvent = { target: {checked: true}};
    const wrapper = shallow(
      <ToggleableListComponent {...defaultProps} />
    );
    wrapper.find("#check-all").simulate("change", mockedEvent); 
}

it（“测试检查列表中的所有项目”，（）=>{
设defaultProps={
列表名：“测试”，
列表：[]作为IListItem[]，
setList:jest.fn（），
}
const mockedEvent={target:{checked:true}}；
常数包装=浅(
);
find（#check all”）.simulate（“change”，mockedEvent）；
}

上面的行返回一个错误“Method”simulate“将在1个节点上运行。找到0。” 如何访问该复选框以模拟更改事件

---

如果我需要提供更多信息，请告诉我。

我很好奇，我有机会自己复制它，所以问题出在这里

首先，您必须使用

装载

而不是

浅层

，以便您的所有子组件（包括化身复选框）进行渲染。使用

浅层

是您获得

Method “simulate” is meant to be run on 1 node. 0 found instead.

此消息表示

wrapper.find

未找到给定的选择器，这意味着您的复选框未呈现

但是，当您将

shallow

更改为

mount

时，会出现以下错误

Method “simulate” is meant to be run on 1 node. 5 found instead.

这意味着有5个元素带有

id=“check all”

，乍一看毫无意义

但是，当您使用

console.log（wrapper.debug（））

签出呈现组件的标记时，您可以看到Material UI实际上在复选框上创建了一大堆具有相同属性（包括

id

）的包装。因此，您最终得到了5个具有相同id的元素

要解决此问题，必须通过从控制台检出渲染树来指定选择器。以下选择器工作正常：

“.MuiIconButton label>#check all”

因此，您的测试应该如下所示：

it("Tests checking all items in list", () => {
   let defaultProps = {
      listName: "test",
      list: [] as IListItem[],
      setList: jest.fn(),
   }
    const mockedEvent = { target: {checked: true}};
    
    // using mount instead of shallow
    const wrapper = mount(
      <ToggleableListComponent {...defaultProps} />
    );

    // using new selector .MuiIconButton-label > #check-all
    wrapper.find(".MuiIconButton-label > #check-all").simulate("change", mockedEvent); 
    ...
}

it（“测试检查列表中的所有项目”，（）=>{
设defaultProps={
列表名：“测试”，
列表：[]作为IListItem[]，
setList:jest.fn（），
}
const mockedEvent={target:{checked:true}}；
//使用mount代替shall
常量包装器=装入(
);
//使用新选择器。MuiIconButton标签>#全部选中
wrapper.find（“.MuiIconButton标签>#全部选中”）.simulate（“更改”，mockedEvent）；
...
}

真的很有趣。我也尝试过装载。但我确实遇到了5个节点中的1个。我使用了wrapper.find（#check all”）。在（0-5）处。模拟（“更改”，mockedEvent）无论我尝试哪个节点，都没有运气。非常感谢您的输入！我甚至通过VSCode中的Jest插件来运行它，可以看到一个节点有我想要触发的事件，但始终无法得到它。