Руководство для начинающих по написанию вашего первого теста с Jest и Enzyme

Вступление

Написание тестов - однообразный, скучный и лишний, иногда ненужный код. Однако для создания хорошо работающего приложения требуется хорошее тестирование. Комплексный набор тестов чрезвычайно полезен при добавлении новой функции, чтобы гарантировать, что любые внесенные изменения не нарушат существующую кодовую базу. Кроме того, тесты используются при рефакторинге или удалении избыточного кода, чтобы гарантировать, что ваши изменения не нарушат угловые случаи.

Зачем нужны тесты?

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

Jest - одна из лучших сред JavaScript для тестирования приложений реагирования, а Enzyme - еще одна библиотека, предназначенная для тестирования приложений реагирования. Эта статья призвана помочь нам начать тестирование с использованием обоих инструментов. Оба они могут быть установлены с помощью npm или Yarn.

Установка и настройка

Нам нужно установить enzyme и enzyme-adapter-react-16 ( количество должно быть основано на используемой версии реакции); предполагается, что ваш проект был создан с create-react-app , который использует jest в качестве средства запуска тестов.

npm i --save-dev enzyme enzyme-adapter-react-16

и мы настроили адаптер для запуска наших тестов.

import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16;
configure({adapter: new Adapter()})

Соглашения об именах файлов

Jest будет искать тестовые файлы с любым из следующих популярных соглашений об именах:

  • Файлы с суффиксом .js в __tests__ папках.
  • Файлы с суффиксом .test.js.
  • Файлы с суффиксом .spec.js.

Jest и Enzyme имеют несколько встроенных методов, используемых в этой статье.

  • it / test— используется для описания самого теста.
  • описать - создает блок, который группирует несколько связанных тестов.
  • expect - используется каждый раз, когда значение проверяется, он вызывается вместе с функцией сопоставления для подтверждения значения.
  • shallow - отображает только тестируемый компонент, но не дочерний компонент.
  • mount - отображает полную модель DOM, включая дочерний компонент.

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

В этом примере у нас есть тест, который проверяет, отображается ли кнопка.

import {shallow} from 'enzyme'
const ButtonComponent = () => <button/>
it('renders button witht text', () => {
  const buttonWrapper = shallow (<ButtonComponent />)
  expect(buttonWrapper.find('button').text()).toBe('Hello')
})

Если мы запустим описанный выше тест с использованием npm test, он завершится неудачно, потому что кнопка не отображает такой текст. Чтобы убедиться, что тест пройден, мы должны обновить наш компонент и поместить текст между тегом кнопки.

const ButtonComponent = () => <button>Hello</button>

Теперь тест будет пройден, потому что кнопка отображает текст.

Мы также можем сгруппировать блок тестов, используя describe the the the the method, предоставленный jest;

const Something = () => (
  <div>
    <h3>Welcome</h3>
    <p>Introduce yourself</p>
  </div>
);
describe('Something component renders html tags', () => {
it('shows h1 tag', () => {
       const somethingWrapper = shallow (<Something />)
         expect(somethingWrapper.find('h1')).toHaveLength(1)
    });
 it('shows p tag', () => {
       const somethingWrapper = shallow (<Something />)
         expect(somethingWrapper.find('p')).toHaveLength(1)
    })
})

Jest и Enzyme предоставляют богатые API-интерфейсы, которые делают тесты записи в наших реактивных приложениях беспроблемной работой, я умоляю вас проверить их документацию и попробовать различные доступные методы тестирования. .

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

Ссылка Codesandbox для просмотра примеров.