用酶测试时如何找到包装在MockedProvider中的版式组件

问题描述

测试的新手，试图弄清楚如何测试父组件是否呈现正确的子组件。说这是主要成分：

export const ParentComponent = () => {
 const {loading,error,data} = useQuery(someQuery);
 //some work with the data
 return (
 <>
   <div>
     <Component1></Component1>
     <Component2></Component2>
   </div>
   <div>
     <div>
       <Typography> Some text </Typography>
     </div>
   </div>
 </>
}

我想找到Typography组件，这是我的初衷，但找不到：

  it("should render a Typography component",async () => {
    const wrapper = createMount(
      <MockedProvider mocks={mocks} addTypename={false}>
        <ParentComponent />
      </MockedProvider>
    );
    wrapper.update();
    let parentComponent = wrapper.find(ParentComponent);
    expect(parentComponent).toHaveLength(1); // passes
    expect(parentComponent.childAt(1).find(Typography)).toHaveLength(1); //doesn't pass
})

我还复制了以下内容：https://www.apollographql.com/docs/react/development-testing/testing/#testing-final-state 我想找到'p'组件，而不是找到Typography标记

解决方法

material-ui并不总是将其html元素命名为与react组件相同。在测试方面，我个人只是在组件上设置id并使用它来查找我的组件。