reactjs - 测试特定的 MaterialUI 图标

Question

是否可以将特定的 Material UI 图标测试为 ArrowLeft/ArrowRight 而不是 .MuiSvgIcon-root？
应用组件:

return {open ? <ArrowLeft/> :<ArrowRight/>}

RTL 测试:下面的测试正在通过，但它不会检查特定的 ArrowLeft 或 ArrowRight 图标。

describes("MockTest",()=>{

it("renders Left arrow",()=>{
const {container} = renders(<App open={true}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

it("renders Right arrow",()=>{
const {container} = renders(<App open={false}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

});

Answer 1

能够通过渲染 Material UI 图标、抓取内部 html，然后将其与我的组件图标进行比较来测试这一点。

const { container } = render(<ArrowRight />);
const iconHtml = container.innerHTML;
cleanup();

const { container } = renders(<App open={false}/>);
expect(
    container.querySelector(".MuiSvgIcon-root").innerHTML
).toEqual(iconHtml);