4.9 Тестовый отрисовщик

Импорт:


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


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

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

Пример:


Код
    
  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' ] }

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


Код
    
  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



TestRenderer.create()


Код
    
  TestRenderer.create(element, options)

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



testRenderer.toJSON()


Код
    
  testRenderer.toJSON()

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



testRenderer.toTree()


Код
    
  testRenderer.toTree()

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



testRenderer.update()


Код
    
  testRenderer.update(element)

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



testRenderer.unmount()


Код
    
  testRenderer.unmount()

Демонтируйте дерево в памяти, инициируя соответствующие события жизненного цикла.



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

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



testInstance.parent


Код
    
  testInstance.parent

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



testInstance.children


Код
    
  testInstance.children

Тестовые экземпляры потомков данного тестового экземпляра.


Вы можете передать функцию createNodeMock в TestRenderer.create как параметр, что позволит использовать пользовательские фейковые ссылки. createNodeMock принимает текущий элемент и должен возвратить объект фейковой ссылки. Это полезно, когда вы тестируете компонент, который полагается на ссылки 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);