Какова цель тестирования, если кнопка React успешно вызывает функцию, переданную onClick? - PullRequest
Новая
       12

Какова цель тестирования, если кнопка React успешно вызывает функцию, переданную onClick?

2 голосов
/ 24 апреля 2020

Тест в приведенном ниже коде является очень распространенной моделью, которую я видел как онлайн, так и в компании, в которой я проходил практику: 

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Test Button component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
    button.find('button').simulate('click');
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

Что я не понимаю, так зачем писать этот тест? Если у компонента есть свойство onClick, и onClick предоставляется обратный вызов, то, конечно, нажатие на этот компонент приведет к вызову обратного вызова. Когда это когда-нибудь не получится? Что я здесь не рассматриваю?

1 Ответ

1 голос
/ 26 апреля 2020

На самом деле этот тест тестирует две вещи:

  1. Вызовы кнопок предоставляются обработчиком onClick, если ваш партнер по команде выполнил некоторый рефакторинг в компоненте Button и забыл предоставить функцию onClick для собственного элемента кнопки, этот тест будет потерпеть поражение. Такая проблема будет обнаружена в PR, когда кто-то просматривает изменения или тестирует, но ни одно из этих двух действий не гарантирует вам, что сломанная кнопка не будет появляться в производстве.

  2. Визуализация кнопки, то есть некоторая библиотека, которая Вы используете для стиля, что кнопка сломана, это часто встречается в javascript мире. then/is-promise 1-строчная библиотека с 11+ миллионами использований была сломана сегодня. Поэтому, если вы тестируете код, он будет падать локально или на CI, прежде чем вы его объедините.

Но при мелком рендеринге второй случай здесь не будет работать так, как ожидалось, потому что он не отображает все компоненты в дереве реакции при запуске всех хуков жизненного цикла, это считается плохой практикой в ​​тестировании, Вы можете проверить сообщение по Kent C Dodds Почему я никогда не использую поверхностный рендеринг для получения более подробной информации.

Это важная часть культуры тестирования для проверки всего, код не работает, пока вы не протестируете его, если ваш код прост, тест тоже будет простым. Это хороший код. Если ваш код запутан и сложен, скорее всего, вы вообще не сможете написать тест для своего кода. Вам придется реорганизовать его, чтобы сделать его тестируемым и простым. Похвально, что вы думаете о значении теста, иногда тесты могут быть бесполезны, а ваш пример - нет.

...