Блог

Главная - Вопросы по программированию - Не удается получить доступ к элементам DOM в компоненте во время тестов (работает в браузере)

Не удается получить доступ к элементам DOM в компоненте во время тестов (работает в браузере)

#reactjs #jestjs #react-testing-library #jsdom

Вопрос:

Фон

У меня есть компонент, в котором я получаю доступ к дочерним элементам элемента (используя ссылку). Цель состоит в том, чтобы перехватить событие вставки в поле ввода и разделить и распределить вставленное содержимое по нескольким неконтролируемым элементам ввода формы. Все это прекрасно работает при визуализации компонента в браузере (с помощью сборника рассказов).

Проблема

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

Вопросы

  • Есть ли что-то неправильное в том, как я использую fireEvent или как настраивается тест?
  • Я довольно новичок в реагировании, должен ли я получать доступ к элементам DOM каким-то другим способом?
  • Или мне просто не следует использовать библиотеку тестирования для проверки такого поведения?

Любая помощь была бы чрезвычайно признательна, потому что я не знаю, что еще можно попробовать на данный момент!

Пример

Я сделал минимальный пример компонента, который показывает проблему.

Компонент

 import React, { useRef } from "react";
import { prettyDOM } from "@testing-library/dom";


function Dummy({}) {
  const inputContainer = useRef(null);

  const handleClick = (e) => {
    // The elements exist!
    console.log('document', prettyDOM(document))
    console.log('div', prettyDOM(inputContainer.current))
    console.log('e.target', prettyDOM(e.target))

    // All attempts to get the inputs return empty collections.
    console.log('div.children', inputContainer.current.children)
    console.log('div.childNodes', inputContainer.current.childNodes)
    console.log('div.querySelectorAll("*")', inputContainer.current.querySelectorAll("*"))
    console.log('e.target.parentNode.querySelectorAll("input")', e.target.parentNode.querySelectorAll("input"))

    // Going via the document doesn't work either...
    console.log('document.querySelectorAll("#outer input").children', document.querySelectorAll('#outer input'))

    // For some reason, firstChild works (but I need all children, not just one).
    console.log('div.firstChild', inputContainer.current.firstChild.value)
  };

  return (
    <fieldset id="outer">
      <div ref={inputContainer}>
        <input type="text" onClick={handleClick} defaultValue="bar"/>
        <input type="text" />
      </div>
    </fieldset>
  );
}

export default Dummy;

Test

 import React from "react";
import { render, screen } from "@testing-library/react";
import { fireEvent } from '@testing-library/dom'
import Dummy from "./Dummy";


describe("Dummy", () => {
  it("should do something", () => {
    render(<Dummy />);

    fireEvent.click(screen.getByDisplayValue("bar"));

    expect(false).toBe(true);
  });
});

Выход шутки

  FAIL  src/components/Dummy.test.js
  Dummy
    ✕ should do something (96 ms)

  ● Dummy › should do something

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      11 |     fireEvent.click(screen.getByDisplayValue("bar"));
      12 |
    > 13 |     expect(false).toBe(true);
         |                   ^
      14 |   });
      15 | });
      16 |

      at Object.<anonymous> (src/components/Dummy.test.js:13:19)

  console.log
    document <html>
      <head />
      <body>
        <div>
          <fieldset
            id="outer"
          >
            <div>
              <input
                type="text"
                value="bar"
              />
              <input
                type="text"
              />
            </div>
          </fieldset>
        </div>
      </body>
    </html>

      at handleClick (src/components/Dummy.js:11:13)

  console.log
    div <div>
      <input
        type="text"
        value="bar"
      />
      <input
        type="text"
      />
    </div>

      at handleClick (src/components/Dummy.js:12:13)

  console.log
    e.target <input
      type="text"
      value="bar"
    />

      at handleClick (src/components/Dummy.js:13:13)

  console.log
    div.children HTMLCollection {}

      at handleClick (src/components/Dummy.js:16:13)

  console.log
    div.childNodes NodeList {}

      at handleClick (src/components/Dummy.js:17:13)

  console.log
    div.querySelectorAll("*") NodeList {}

      at handleClick (src/components/Dummy.js:18:13)

  console.log
    e.target.parentNode.querySelectorAll("input") NodeList {}

      at handleClick (src/components/Dummy.js:19:13)

  console.log
    document.querySelectorAll("#outer input").children NodeList {}

      at handleClick (src/components/Dummy.js:22:13)

  console.log
    div.firstChild bar

      at handleClick (src/components/Dummy.js:25:13)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.995 s
Ran all test suites matching /dum/i.

Watch Usage: Press w to show more.

Ответ №1:

🙈🙈🙈

Эти

  • HTMLCollection {}
  • NodeList {}

это не пустые списки! Они печатаются таким образом, независимо от их содержания! Список с 1 или 1000 элементами будет напечатан как {} (jsdom, я полагаю?).

Я искренне надеюсь, что это поможет кому-то еще сэкономить немного времени, потому что это определенно стоило мне слишком дорого… 😆

Метки: