Unetway

ReactJS - Test Renderer

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

Import

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

По сути, этот пакет позволяет легко получить снимок иерархии представлений платформы (аналогично дереву DOM), отображаемый компонентом React DOM или React Native без использования браузера или jsdom.

Пример:

import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(testRenderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

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

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

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">Hello</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">Sub</p>
  );
}

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;

expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

TestRenderer

  • TestRenderer.create()

TestRenderer instance

  • testRenderer.toJSON()
  • testRenderer.toTree()
  • testRenderer.update()
  • testRenderer.unmount()
  • testRenderer.getInstance()
  • testRenderer.root

TestInstance

  • testInstance.find()
  • testInstance.findByType()
  • testInstance.findByProps()
  • testInstance.findAll()
  • testInstance.findAllByType()
  • testInstance.findAllByProps()
  • testInstance.instance
  • testInstance.type
  • testInstance.props
  • testInstance.parent
  • testInstance.children

Reference

TestRenderer.create()

TestRenderer.create(element, options);

Создайте TestRenderer экземпляр с переданным элементом React. Он не использует реальный DOM, но он все еще полностью отображает дерево компонентов в памяти, чтобы вы могли делать утверждения об этом. Возвращенный экземпляр имеет следующие методы и свойства.

testRenderer.toJSON()

testRenderer.toJSON()

Возвращает объект, представляющий рендеринг дерева. Это дерево содержит только узлы платформы, такие как и / <div> или <View> их реквизиты, но не содержит каких-либо написанных пользователем компонентов. Это удобно для тестирования моментальных снимков.

testRenderer.toTree()

testRenderer.toTree()

Возвращает объект, представляющий рендеринг дерева. В отличие от этого toJSON(), представление более подробно, чем представленное toJSON(), и включает в себя пользовательские компоненты. Вам, вероятно, не нужен этот метод, если вы не пишете собственную библиотеку утверждений поверх тестового рендерера.

testRenderer.update()

testRenderer.update(element)

Повторите рендеринг дерева в памяти с новым корневым элементом. Это имитирует обновление React в корне. Если новый элемент имеет тот же тип и ключ, что и предыдущий элемент, дерево будет обновляться; в противном случае он снова установит новое дерево.

testRenderer.unmount()

testRenderer.unmount()

Отключите дерево in-memory, инициируя соответствующие события жизненного цикла.

testRenderer.getInstance()

testRenderer.getInstance()

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

testRenderer.root

testRenderer.root

Возвращает корневой объект «тестовый экземпляр», который полезен для создания утверждений об определенных узлах в дереве.

testInstance.find()

testInstance.find(test)

Найдите один экземпляр экземпляра потомка, для которого test(testInstance) возвращается true. Если test(testInstance) не возвращается trueровно один тестовый экземпляр, он выдает ошибку.

testInstance.findByType()

testInstance.findByType(type)

Найдите один экземпляр тестового экземпляра с предоставленным type. Если не существует одного экземпляра теста с предоставленным type, он выдает ошибку.

testInstance.findByProps()

testInstance.findByProps(props)

Найдите один экземпляр тестового экземпляра с предоставленным props. Если не существует одного экземпляра теста с предоставленным props, он выдает ошибку.

testInstance.findAll()

testInstance.findAll(test)

Найдите все тестовые экземпляры потомков, для которых test(testInstance) возвращается true.

testInstance.findAllByType()

testInstance.findAllByType(type)

Найдите все экземпляры тестового экземпляра с предоставленным type.

testInstance.findAllByProps()

testInstance.findAllByProps(props)

Найдите все экземпляры тестового экземпляра с предоставленным props.

testInstance.instance

testInstance.instance

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

testInstance.type

testInstance.type

Тип компонента, соответствующий этому тестовому экземпляру. Например, <Button /> компонент имеет тип Button.

testInstance.props

testInstance.props

Реквизит, соответствующий этому тестовому экземпляру. Например, <Button size="small /> компонент имеет {size: 'small'} реквизит.

testInstance.parent

testInstance.parent

Родительский тестовый экземпляр этого тестового экземпляра.

testInstance.children

testInstance.children

Дети тестируют экземпляры этого тестового экземпляра.

Ideas

Вы можете передать createNodeMock функцию в TestRenderer.create качестве опции, которая позволяет настраивать макетные ссылки. createNodeMockпринимает текущий элемент и должен возвращать макет ref объекта. Это полезно, когда вы тестируете компонент, который полагается на ref.

import TestRenderer from 'react-test-renderer';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = null;
  }
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return <input type="text" ref={el => this.input = el} />
  }
}

let focused = false;
TestRenderer.create(
  <MyComponent />,
  {
    createNodeMock: (element) => {
      if (element.type === 'input') {
        // mock a focus function
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);