Проверьте, что метод React prop был вызван с помощью Jest - PullRequest
Новая
       45

Проверьте, что метод React prop был вызван с помощью Jest

0 голосов
/ 02 марта 2019

У меня есть компонент Input, который принимает метод prop и вызывает его, когда пользователь что-то вводит. Сам код работает, как и ожидалось, но по некоторым причинам тест не проходит.Он считает, что метод поддержки не был вызван.Почему это происходит?В целях тестирования я использую Jest и реагировать на тестирование библиотеки.

И второй вопрос.В реальном приложении моя идея состоит в том, чтобы проверить параметры, которые были переданы этому методу проп.Считается ли это тестированием реализации (я знаю, что должен его протестировать)?

Input.js 

export default function Input({ onChange }) {
  return <input onChange={onChange} />;
}

Test 

import React from "react";
import { render, act, cleanup, fireEvent } from "react-testing-library";
import Input from "./input";

describe("Input tests", () => {
  afterEach(cleanup);

  it("Should call prop function", () => {
    const onChange = jest.fn();
    const { getByTestId } = render(<Input onChange={onChange} />);
    const input = getByTestId("input");

    act(() => {
      fireEvent.change(input, { target: { value: "Q" } });
    });

    expect(onChange).toHaveBeenCalled();
  });
});

https://codesandbox.io/s/y229669nvx

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Причина, по которой ваш тест не работает, заключается в том, что вы используете getByTestId, чтобы найти свой элемент.getByTestId ищет DOM-узел с атрибутом data-testid.

Чтобы пройти тест, у вас есть несколько вариантов.

Вы можете добавить data-testid к вашемуinput: <input data-testid="input" onChange={onChange} />.Это сработало бы, однако лучше избегать тестовых идентификаторов всякий раз, когда вы можете.

В реальном приложении ваш ввод будет отображаться с label, мы можем воспользоваться этим: 

const { getByLabelText } = render(
  <label>
    My input
    <Input onChange={onChange} />
  </label>
)
const input = getByLabelText('My input')

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

const { container } = render(<Input onChange={onChange} />)
// Any of these would work
const input = container.firstChild
const input = container.querySelector('input')

В качестве примечания, я согласен, что RTL-тесты кажутся более сложными по сравнению с Enzyme.Для этого есть веская причина.RTL подталкивает вас к тестированию вашего приложения, как если бы оно было черным ящиком.В начале это сделать немного сложнее, но в конечном итоге это приведет к улучшению тестов. С другой стороны, фермент

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

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

0 голосов
/ 03 марта 2019

После прочтения это выглядит как , чтобы не утверждать, что обработчики событий .Хотя кажется, что работает в React 16.5 , использовать 16.8.x не удается.Я бы посоветовал перейти к энзиму, если вы хотите протестировать такие функции.

Тестирование с react-testing-library завершается неудачно (однако, как вы заметите, при запуске теста значение входного параметра действительно изменится): https://codesandbox.io/s/n3rvy891n4

Тестирование с enzyme успешно выполнено: https://codesandbox.io/s/lx34ny41nl

...