I've recently implemented a feature similar to the example showcased on MaterialUI's TransferList. However, I'm encountering difficulties accessing a checkbox within the avatar={}. The project utilizes Jest and Enzyme for testing purposes. To streamline the process, I included IDs to elements I intend to test, aiding in the utilization of the .find function.
export interface IListItem {
itemId: number;
itemName: string;
isChecked: boolean;
}
interface IProps {
listName: string;
list: IListItem[];
setList: any;
}
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`}
/>)}
I am attempting to access the checkbox using the .find enzyme function to simulate a change event.
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);
}
The error message "Method “simulate” is meant to be run on 1 node. 0 found instead." crops up upon executing the above line. How can I successfully access that checkbox to trigger the change event?
Please inform me if further details are required.