Атрибут Отключенная кнопка не обновляется правильно, когда выполняются два рендеринга одного и того же компонента - PullRequest
Новая
       8

Атрибут Отключенная кнопка не обновляется правильно, когда выполняются два рендеринга одного и того же компонента

0 голосов
/ 10 января 2019

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

Для следующего запуска теста в только что созданном приложении CRA с использованием jest-dom 3.0.0 и response-testing-library 5.4.4: 


    import React from "react";
    import { render } from "react-testing-library";
    import "jest-dom/extend-expect";

    import Component from "./Component";

    describe("Verify UI state based on jobs", () => {
      it("mounts with no previous data", () => {
        const { getByTestId } = render(<Component data={[]} />);
        expect(getByTestId("refresh-button")).toBeDisabled();
      });

      it("mounts with previous data", () => {
        const { getByTestId } = render(<Component data={["hi"]} />);
        expect(getByTestId("refresh-button")).not.toBeDisabled();
      });
    });

    /*
    const Component = props => {
      return (
        <div>
          <button data-testid="refresh-button" disabled={props.data.length === 0}>
            Refresh
          </button>
        </div>
      );
    };
    */

По сути, я получаю следующую ошибку:

Проверка состояния интерфейса на основе заданий ›монтируется с предыдущими данными 

expect(element).not.toBeDisabled()

Received element is disabled:
  <button data-testid="refresh-button" disabled="" />

  13 |   it("mounts with previous data", async () => {
  14 |     const { getByTestId } = render(<Component data={["hi"]} />);
> 15 |     expect(getByTestId("refresh-button")).not.toBeDisabled();
     |                                               ^
  16 |   });
  17 | });
  18 |

  at Object.toBeDisabled (src/Component.test.js:15:47)

Однако, если я отключаю первый тест, второй теперь проходит как надо. Если я переупорядочиваю вещи, первый тест всегда проходит, а второй всегда не проходит, даже если первый тест является тестом «монтирования с предыдущими данными».

Не уверен, если это проблема в библиотеке тестов, jest-dom или в моем коде, но любые советы о том, как правильно построить эти тесты, будут оценены.

1 Ответ

0 голосов
/ 11 января 2019

В настоящее время в документах говорится, что когда render вызывается ", запросы из dom-testing-library автоматически возвращаются с первым аргументом, связанным с визуализированным контейнером" .

Как оказалось, это ошибка в документации, поскольку запросы фактически связаны с document.body, если render не передано *1011* (код здесь и здесь ).

react-testing-library использует DOM, и если между тестами не вызывается cleanup, элементы DOM из предыдущих тестов все еще будут присутствовать и будут включены в более поздние результаты запроса.

В этом случае оба Component элемента существуют в document.body во время второго теста, и поскольку getByTestId запрашивает document.body, он заканчивает тем, что находит их обоих, и когда он находит более одного, он возвращает первый один он находит .

Это означает, что Component из первого теста возвращается getByTestId во втором тесте, что приводит к сбою теста, поскольку первый компонент отключен.

Для решения проблемы обязательно вызывайте cleanup после каждого теста, чтобы удалить все элементы DOM, которые были добавлены во время предыдущих тестов: 

import React from "react";
import { render, cleanup } from "react-testing-library";
import "jest-dom/extend-expect";

afterEach(cleanup);  // clean up the DOM after each test

describe("Verify UI state based on jobs", () => {
  it("mounts with no previous data", () => {
    const { getByTestId } = render(<Component data={[]} />);
    expect(getByTestId("refresh-button")).toBeDisabled();  // SUCCESS
  });

  it("mounts with previous data", () => {
    const { getByTestId } = render(<Component data={["hi"]} />);
    expect(getByTestId("refresh-button")).not.toBeDisabled();  // SUCCESS
  });
});
...