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

Posted 2023-03-10

【中文标题】使用酶进行测试时如何找到包裹在 MockedProvider 中的 Typography 组件

【英文标题】：How to find Typography component wrapped in MockedProvider when testing with enzyme

【发布时间】：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 组件

【参考方案1】：

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