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

对于RTL包来说这是不可能的。查看RTL软件包作者的这篇article帖子。

RTL 不支持浅层渲染。因此，public Object[] invoke(Map<String, Object> request) { InputStream is = (InputStream) request.get(Constants.BODY); String abc = getIdFromBody(is) if(abc !=null) { return Constants.PHASE_DONE;} } private String getIdFromBody(InputStream is) { ObjectNode node; String text = null ; try { text = IOUtils.toString(is, StandardCharsets.UTF_8.name()); logger.info("requestPayload={}", text); } catch (IOException e) { e.printStackTrace(); } logger.info("didnt get entity_id ", text); return text; }和ArrowLeft将始终呈现。

Answer 2

能够通过渲染 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);

测试特定的MaterialUI图标

2 个答案: