Как проверить внешний вид DOM-узла с помощью реагирующей-тестирующей библиотеки - PullRequest
Новая
       9

Как проверить внешний вид DOM-узла с помощью реагирующей-тестирующей библиотеки

0 голосов
/ 16 февраля 2019

Я нахожусь в процессе перехода к библиотеке реагирования-тестирования и испытываю затруднения, утверждая, что текст изменяется при некотором состоянии.То, что я хочу проверить, - это внешний вид текста или узла «Второй вариант выбран».Но это просто не удается, так как узел не меняется.Это работает в браузере, хотя.

Я смотрел на документы , но использование wait или waitForElement почему-то не работает для меня.

App.js 

import React, { useState } from "react";

const options = {
  First: "First",
  Second: "Second"
};

function App() {
  const [action, setAction] = useState(options.First);

  return (
    <form>
      <label>
        <input
          type="radio"
          name="radio1"
          value={options.First}
          checked={action === options.First}
          onChange={event => setAction(event.target.value)}
        />
        First
      </label>

      <label>
        <input
          type="radio"
          name="radio1"
          value={options.Second}
          checked={action === options.Second}
          onChange={event => setAction(event.target.value)}
        />
        Second
      </label>

      {action === options.First ? (
        <div>First option selected</div>
      ) : action === options.Second ? (
        <div>Second option selected</div>
      ) : null}

    </form>
  );
}

export default App;

App.test.js 

import React from 'react';
import { render, cleanup, fireEvent } from 'react-testing-library';
import App from './App';

afterEach(cleanup);

it('radio button', async () => {
  const {getByLabelText, getByText } = render(<App/>);
  const first = getByLabelText("First");

  fireEvent.change(first, { target: { value: "Second" }});

  expect(first.value).toEqual("Second");
  expect(getByText("Second option selected").textContent).toEqual("Second option selected") ;

});

1 Ответ

0 голосов
/ 16 февраля 2019

Этот тест работает: 

it("radio button", () => {
  const { getByLabelText, getByText } = render(<App />);

  fireEvent.click(getByLabelText("Second"));

  /* This will fail
     expect(getByLabelText("First").value).toEqual("Second");
  */
  expect(getByText("Second option selected")).toBeInTheDocument();
});

Я думаю, что в jsdom есть какое-то странное поведение, которое по какой-то причине вызывает событие 'onChange', только если происходит click.В то же время он не обновляет value в DOM, если не происходит событие change.

Мой совет не проверять value ваших радиовходов.В конце ваш тест должен заботиться только о том, что видит пользователь.

...