Отрендерить тот же компонент в beforeAll / beforeEvery: testing-library / react

Я тестирую разные вещи в одном компоненте в отдельных тестах. Я не хочу писать рендер внутри каждого test, но приведенный ниже код не работает.

Я понял, что функция очистки очищает визуализированный компонент после каждого теста, так что это хорошо.

import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import myComp from './myComp'

const renderComponent = () => {
  return render(<myComp />);
};

describe("desc", () => {
  beforeEach(() => {
   const {getAllByText, getByText, getByRole} = renderComponent()
  });

  test("1", () => {
      console.log(getAllByText) // not defined
  });

  test("2", () => {
      console.log(getAllByText) // not defined

  });

})

Приведенная выше настройка приводит к ошибке:

ReferenceError: getAllByText is not defined

Мой текущий обходной путь - включать renderComponent() вызов функции в каждый test, но это выглядит не так чисто.

test("1", () => {
    const {getAllByText, getByText, getByRole} = renderComponent()
});

Пытаться:

let result;
beforeEach(() => {
    result = renderComponent();
    }
test("renders success state", () => {
    const { getByText } = result;
    expect(getByText(noAccess)).toBeInTheDocument();
    expect(getByText(applyForAccessButton)).toBeInTheDocument();});

Я получаю ошибку:

    TypeError: Cannot read property 'getByText' of undefined

reactjs jestjs components react-testing-library
person meerkat    schedule 20.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

getAllByText является локальным для beforeEach функции, он не определен в тестовых областях, где к нему осуществляется доступ. Для того, чтобы этот способ работал, он должен быть:

  let getAllByText, getByText, getByRole;

  beforeEach(() => {
   ({getAllByText, getByText, getByRole} = renderComponent());
  });
  ...
person Estus Flask    schedule 20.11.2020
comment
По какой-то причине я сейчас получаю TypeError: getByText is not a function в тесте, когда сразу использую getByText. - person meerkat; 20.11.2020
comment
Как именно сразу его использовать? Я не понимаю, как это возможно, потому что, если getAllByText доступен, getByText тоже должен быть там, testing-library.com/docs/dom-testing-library/api-queries. FWIW, на данном этапе нецелесообразно деструктурировать результат рендеринга, потому что это приводит к шаблонному коду, результат имеет множество свойств, любое из которых может потребоваться в какой-то момент, я бы предложил вместо этого использовать let result; ... result = renderComponent(). - person Estus Flask; 20.11.2020
comment
Я обновил вопрос, указав свое использование и полученную ошибку - person meerkat; 20.11.2020
comment
Я не понимаю, как это возможно, учитывая, что renderComponent действительно возвращает результат рендеринга, как в вопросе, и beforeEach применяется к тесту, в котором вы используете результат, я ожидаю, что некоторые части будут отличаться от того, что вы показали. Если все сделано правильно, это очень просто, render возвращает объект результата, он вызывается beforeEach перед тестом, тест обращается к объекту результата. Вы можете отладить то, что возвращает render(<myComp />), и убедиться, что оно вообще вызывается. Если проблема не исчезнет, ​​укажите способ ее воспроизведения. - person Estus Flask; 20.11.2020