Компонент

В простейшей форме реагирующий компонент - это просто функция, принимающая единственный объект с именем props в качестве входных данных.

es5 👍

function MyComponent(props) {
   return <p>I am a react Component</p>;
};

es6 😉

const MyComponent = (props) => {
  return <p>I am a react Component</p>
}

Это будут ваши самые простые компоненты в react.

Зачем вам их использовать? 🤔

  1. Простота, пока человек понимает функцию javascript, тогда он понимает и этот компонент (сочувствие к себе и другим).
  2. Идеально подходит для создания презентационных компонентов: это в основном элементы пользовательского интерфейса. Такие, которые возвращают некоторую разметку, чтобы увидеть больше преимуществ использования презентационных и контейнерных компонентов, подробнее здесь.
  3. Легко проверить, в конце концов, это всего лишь функция!

Давайте посмотрим на пример

Допустим, у нас есть задача…

const TodoItem =  ({text, id, completed, createdAt, completedAt}) => {
   return(
    <div>
     <div>
       <p>{text}</p>
       <p className="todo_subtext">{completedAt}</p>
     </div>
    </div>
   )
}

Здесь у нас есть функция, которая принимает один объект props, здесь мы деструктурировали этот объект, чтобы получить доступ к элементам, которые мы хотим использовать в нашем интерфейсе разметки / пользователя.

Эта функция возвращает div, который содержит информацию в нашей задаче.

  • Текст Todo
  • Дата завершения Todo

Когда я создаю свое приложение. Я обнаружил, что создаю довольно много компонентов такого рода (презентационных) для отображения моих пользовательских интерфейсов.

Тестирование этих компонентов может быть обременительным, даже несмотря на то, что они просты по своей природе. Это компоненты, в которых, вероятно, будут происходить манипуляции с DOM, такие как видимость и анимация, скорее всего, произойдут с такими компонентами.

Как ответственные разработчики, мы хотели бы протестировать их и в дальнейшем предотвратить регресс.

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

var React = require('react');
var ReactDOM = require('react-dom');
var expect = require('expect');
var $ = require('jQuery');
import * as actions from 'actions';
//actual component we need to render
import {TodoItem} from 'TodoItem';
var TestUtils = require('react-addons-test-utils')


//Perform assertions
describe('TodoItem', () =>{

  it('should exist', () => {
     expect(TodoItem).toExist();
  });

  //other tests
  it('should dispatch toggleTodo on click', () => {
    var todoData = {
      id: 199,
      text: 'write todo test jsx ',
      completed: true
    };

    //create action
    var action = actions.startToggleTodo(todoData.id, !todoData.completed)

    var todoSpy = expect.createSpy();
    var todo = TestUtils.renderIntoDocument(<TodoItem {...todoData} dispatch={todoSpy}/>);

    //simulate click
    var $element = $(ReactDOM.findDOMNode(todo));
    TestUtils.Simulate.click($element[0]);
    expect(todoSpy).toHaveBeenCalledWith(action);
  })


});

Как видите, тестирование простого компонента пользовательского интерфейса может довольно быстро стать довольно сложным.

Однако из-за природы React Elements and Components. Мы можем просматривать большинство встроенных элементов пользовательского интерфейса в виде дерева объектов, наши основные функциональные компоненты указаны выше.

const MyComponent = (props) => (
   return <p>I am a react Component</p>
)

Будет равно следующему дереву объектов

{
 type: 'p', 
 props: {
    children: 'I am a react Component'
 }
}

В Comes Jest Snapshots 🚀

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

Сначала установите jest и несколько сотрудников react-test-renderer

yarn add jest react-test-renderer --dev

В нашем тесте мы можем сделать это следующим образом

import React from 'react'
import TodoItem from '../TodoItem'
import renderer from 'react-test-renderer'
it('renders correctly',() => { 
 const props = { 
        text='Finish Blog'
        completed=false
        completedAt='0'
        createdAt='07/08/2017'
 }
 const tree = renderer.create(<TodoItem props={props}/>).toJSON()
 expect(tree).toMatchSnapshot()
})

Здесь мы можем проверить, что наш компонент всегда будет отображать правильный пользовательский интерфейс с учетом предоставленных реквизитов.

Jest создаст файл моментального снимка, который напоминает представление дерева объектов нашего компонента. Этот файл следует зафиксировать вместе с вашим кодом и просмотреть как часть вашей кодовой базы.

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

Как вы тестируете свои пользовательские интерфейсы?

Запросы? Предложения? PR?

Вернуться к коду! 😝