使用酶进行测试时如何找到包裹在 MockedProvider 中的 Typography 组件答案

【问题标题】：How to find Typography component wrapped in MockedProvider when testing with enzyme使用酶进行测试时如何找到包裹在 MockedProvider 中的 Typography 组件
【发布时间】：2020-12-02 14:48:58
【问题描述】：

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

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 组件

【问题讨论】：

标签： reactjs testing enzyme react-apollo react-testing-library

【解决方案1】：

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

【讨论】：