Как проверить, сколько раз компонент отображался в React?

#javascript #reactjs

Вопрос:

У меня есть сценарий с 2 компонентами:

Приложение
Люди

Я хочу проверить, отображаются ли люди 10 раз внутри приложения. Итак, я пытаюсь проверить это с помощью Jest. До сих пор я делал это на своем src/App.test.js:

 import React, { Component } from "react";
import People from "./components/People";
import App from './App';

test('Total people = 10', () => {
    expect(App).find(People).toHaveLength(10);
});

Но я получаю сообщение о том, что:

Ошибка типа: ожидать (…).find не является функцией.

Как я могу проверить, сколько раз компонент отображается внутри другого компонента, используя React и Jest? Кто-нибудь может мне помочь?

1. сначала вам нужно отобразить свой компонент reactjs.org/docs/testing-recipes.html#rendering

2. Спасибо, но я не очень хорошо это понял. Я новичок в React и модульном тестировании. Не могли бы вы привести другой пример?

3. хорошо, хотя это довольно просто, я отвечу, используя enzyme

Ответ №1:

Для тестирования компонентов react сначала вам нужно их визуализировать, для этого есть несколько инструментов, но поскольку ваши рассуждения в этом тесте направлены на проверку того, сколько раз компонент был визуализирован внутри другого компонента, enzyme хорошо справляется со своим методом shallow .

 import React from "react";
import App from "./App";
import People from "./components/People";
import { shallow } from "enzyme";

it("Total people = 10", () => {
  const wrapper = shallow(<App />);
  expect(wrapper.find(People)).toHaveLength(10);
});

Сначала вам нужно настроить enzyme в вашем проекте, подробнее читайте в документации.

Текущая тенденция в тестировании заключается в проверке того, что пользователь действительно видит на странице, поэтому большинство людей использует react-testing-library, вам будет полезно проверить это

1. Я внес некоторые изменения в свой код, следуя вашему примеру. Метод test и shallow, похоже, работают нормально. Теперь проблема в том, что компонент People не найден никакими средствами. Я тестировал другой компонент, и мой тест считал его нормально. Компонент People находится внутри функции map, я перебираю результаты вызова API и возвращаю компонент 10 раз. Итак, почему тест показывает 0 совпадений для компонента People?

2. вы издевались над вызовом api? dev.to/zaklaughton /…

3. Нет .. я не знал, что мне нужно это делать, никогда не использовал это раньше. Я думаю, что я не понял часть создания поддельного запроса axios, но я не понял, как собрать все вместе. Я думаю, мне нужно много изучить о тестировании React, есть чему поучиться.

4. @churros если мой ответ помог вам с вашей первоначальной проблемой, пожалуйста, примите его

Ответ №2:

Если вы когда-нибудь переключитесь на react-testing-library, вы можете написать тест примерно так:

 import React, { Component } from "react";
import App from './App';
import {render} from "@testing-library/react";


test('Total people = 10', async () => {
    const { getAllByText } = await render(<App />);

    expect(getAllByText('string_in_People')).toHaveLength(10);
});

По сути, вы должны использовать один из встроенных getAllBy... методов запроса библиотеки для запроса всех экземпляров элемента, который появляется ровно один раз в каждом экземпляре вашего <People /> компонента. Длина результирующего набора будет равна количеству <People /> экземпляров на странице.