Результаты теста jest после fireEvent.click () (без энзима) - PullRequest
Новая
       7

Результаты теста jest после fireEvent.click () (без энзима)

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

Я не могу понять, почему состояние рендера не меняется после нажатия кнопки для этого тестового фреймворка.Это работает на приложении, но не на тестовом примере.Я попытался прочитать несколько документов и использовать async/await waitForElement, moch renders и несколько комбинаций getBy * ... кажется, ничего не работает.

Я скопировал код в песочницу -> https://codesandbox.io/s/40pz9nj469

Вот блок кода, который я пытаюсь заставить работать (находится в ./src/controls/Controls.spec.js): 

it("Testcase: button 'Close Gate' changes to 'Open Gate' upon event click", () => {
  const { getByTestId } = render(<Controls />);
  const button = getByTestId("closed");

  expect(button).toHaveTextContent(/Close Gate/i);
  fireEvent.click(button);
  expect(button).toHaveTextContent(/Open Gate/i); // <<<fails here>>>
});

Сообщение об ошибке ...

enter image description here

Мне сказали, что нам нельзя использовать энзим, поэтому монтировать / мелить здесь не вариант ...

У кого-нибудь есть идеи, как сделать эту работу?

1 Ответ

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

Я думаю, что ваш тест не имеет смысла начинать с.

Вы проверяете, изменилось ли значение после щелчка, но как могло измениться значение, если значение closed не изменилось.

В контексте модульного тестирования и для вашего компонента я бы разделил ваш тест на две части:

  1. Проверка того, что функция toggleClosed вызывается при нажатии кнопки.
  2. Проверьте, отображается ли правильный текст на основе значения closed

Так что это даст вам что-то вроде

Чтобы проверить, была ли вызвана функция при нажатии 

    it("Testcase: button 'Close Gate' calls the toggleClosed function upon event click", () => {
      const mockFn = jest.fn();
      const { getByTestId } = render(<Controls toggleClosed={mockFn} />);
      const button = getByTestId("closed");

      fireEvent.click(button);

      expect(mockFn).toHaveBeenCalled();
    });

, чтобы проверить правильность текстового значения, следующие 2 теста: 

it("Testcase: should display 'Open Gate' when closed is true", () => {
  const { getByTestId } = render(<Controls closed={true} />);
  const button = getByTestId("closed");

  expect(button).toHaveTextContent(/Open Gate/i);
});

it("Testcase: should display 'Close Gate' when closed is false", () => {
  const { getByTestId } = render(<Controls closed={false} />);
  const button = getByTestId("closed");

  expect(button).toHaveTextContent(/Close Gate/i);
});

Тогда, на мой взгляд, вторая кнопка в вашем компоненте полностью протестирована

...