Блог

Новичок в тестировании, пытаюсь выяснить, как проверить, правильно ли родительский компонент отображает дочерние компоненты. Допустим, это основной компонент:

 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 для компонента и использую его для поиска моего компонента.