Тесты снимки в реакции с использованием шума

Автор оригинала: Mark_S.

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

Сегодня я собираюсь поговорить о снимках, используя Jest Отказ Они легко писать, они быстро, а главное, вы наверняка знаете, если что-то не правильно, если вы используете их правильно. Эти снимки предупреждают вас за каждое изменение, которое вы зарабатываете, что влияет на рендеринг: вы делаете что-то простое или более продвинутое рендеринг, которое включает в себя Условия или петли Отказ

Настроить шума

Во-первых, вам нужно Настроить шутку в проекте. Для этого установите несколько пакетов:

npm install --save-dev jest babel-jest babel-core regenerator-runtime babel-preset-es2015 babel-preset-react 

Вам не нужно устанавливать Regenerator-Runtime, если вы используете NPM 3 или 4 или пряжу. Вам придется добавить .babelrc Файл в корне проекта Далее:

{
  "presets": ["env", "es2015", "react"]
}

Кроме того, вам нужно установить Пакет React-Test-Renderer Отказ Этот пакет используется для рендеринга взаимодействующих компонентов в чистые объекты JavaScript.

npm i react-test-renderer --save

Если вам нужна определенная конфигурация для ваших тестов, вы можете Настройте jest с помощью package.json file Отказ

Теперь вы готовы написать свой первый тест на снимки!

Написание тестов снимков

При написании моментальных испытаний с использованием Whest, вы должны в основном просто следуйте следующему шаблону:

import renderer from 'react-test-renderer';
import Component from '../Component.react';

it('renders correctly', () => {
  const tree = renderer.create(
    
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Вы используете React-Test-Renderer Чтобы создать компонент с желаемым реквизит Преобразуйте его в JSON, а затем проверьте, соответствует ли он снимком. Легко, верно?

Вот более конкретный пример – скажем, у вас есть фиктивное компонент называется Вход Для чего вы хотите написать тест на снижение:

function Input({ id, placeholder, label, onChange, value }) {
    return (
        

            
                { label }
            
            
        
    )
}

Для входного компонента он может выглядеть что-то подобное:

import renderer from 'react-test-renderer';
import Input from '../Input.react';

it('renders correctly', () => {
  const tree = renderer.create(
     {}}
        value={''}
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Бегущие тесты

Чтобы запустить тест, вам просто надо Тип jest Команда в терминале Отказ Выходной файл Snapshot будет создан, а при запуске теста в следующий раз, jest будет сравнивать этот файл вывода Snapshot в свой обновленный компонент.

Если вы внесите некоторые изменения в компонент, который влияет на его рендеринг (например, добавление нового элемента в список список для отображения ), тест не пройдет неудачу, потому что новый объект будет отличаться от предыдущего. Если были предназначены изменения, вы можете обновить снимкость, используя команду jest --updatesnapshot Отказ

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

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

Спасибо, что нашли время, чтобы прочитать эту статью! Я надеюсь, что вы найдете это полезным.

Эта статья была первоначально Pubslihed на Колосек Блог Отказ