Testing specific MaterialUI Icon

user_10988540 0
Viewed 1936

Is it possible to test in specific Material UI icon as ArrowLeft / ArrowRight instead of .MuiSvgIcon-root?

App component:

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

RTL Testing : Below tests are passing but it doesn't check in specific ArrowLeft or ArrowRight icon.

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();
});

});
material-ui react-testing-library jestjs reactjs
2 Answers

Was able to test this by rendering the Material UI icon, grabbing the inner html, then comparing it to my components icon.

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

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

It's impossible for the RTL package. Check this article post by the author of the RTL package.

RTL DOES NOT support shallow rendering. So the ArrowLeft and ArrowRight will always be rendered.

user_64635580
Related