如何循环遍历子数组并检查组件是否存在 React 测试库

Question

Currently I want to loop through all the child components and check if all the components exist with React Testing Library. The test below gave me the following error:

TypeError: component.contains is not a function

Not sure what is wrong with this test, but it seems it cannot test based on the test ID.

 import React from 'react' import { RandomMeals } from '../RandomMeals/RandomMeals'; import ListMeals from '../ListMeals/ListMeals'; import { SearchBar } from '../SearchBar/SearchBar'; import { TopBar } from '../TopBar/TopBar'; import SearchResult from '../SearchResult/SearchResult'; export const AppComponent = () => ( <div className="app-container" data-testid="app-component-test"> <TopBar/> <div className="column app-mobile app-desktop-left"> <RandomMeals/> <SearchBar/> <SearchResult/> </div> <div className="column app-mobile app-desktop-right"> <ListMeals/> </div> </div> ) test("It should check if components exist", () => { render( <Provider store={store}> <AppComponent/> </Provider> ); const component = screen.getAllByTestId("app-component-test"); console.log(component); expect(component.contains(<RandomMeals/>)).toBe(true); });

Answer 1

If you want to check that <RandomMeals /> is being rendered, you should query based on that element:

function RandomMeals(props) {
  return <div data-testid="random-meals-test">...</div>
}

test("It should check if components exist", () => {
  const screen = render(
    <Provider store={store}>
      <AppComponent/>
    </Provider>
  );

  expect(screen.getByTestId("random-meals-test")).not.toThrow()
  // alternatively
  expect(screen.queryByTestId("random-meals-test")).toBeTruthy()
});

To answer your question about what's wrong with the test, getAllByTestId returns an array of DOM nodes that match the query. And Array#contains is not a method in JavaScript. You could use getByTestId to return a single DOM node, which does have a contains method, but even in that case you cannot pass arbitrary JSX as an argument.