Test Renderer

Използване

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

Преглед

Този пакет предоставя React рендер, който може да се използва да рендерира React компоненти до чисти JavaScript обекти, без да зависят от DOM-a или нейтив мобилни среди.

Или иначе казано, този пакет прави по-лесно взимането на snapshot от платформата на view йерархията (подобно на 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' ] }

Може да използвате snapshot тестването на Jest, за да запазите копие на JSON дървото автоматично във файл и да проверите във вашите тестове, че не са се променени snapshot-ите: Научете повече за това.

Също може да търсите в резултата и да намерите специфични елементи и да направите проверки за тях.

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">Здравейте</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="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.act()

TestRenderer инстанция

• 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 instance.

TestRenderer.act()

TestRenderer.act(callback);

Similar to the act() helper from react-dom/test-utils, TestRenderer.act prepares a component for assertions. Use this version of act() to wrap calls to TestRenderer.create and testRenderer.update.

import {create, act} from 'react-test-renderer';
import App from './app.js'; // The component being tested

// render the component
let root; 
act(() => {
  root = create(<App value={1}/>)
});

// make assertions on root 
expect(root.toJSON()).toMatchSnapshot();

// update with some different props
act(() => {
  root.update(<App value={2}/>);
})

// make assertions on root 
expect(root.toJSON()).toMatchSnapshot();

testRenderer.toJSON()

testRenderer.toJSON()

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

testRenderer.toTree()

testRenderer.toTree()

Връща обект преставляващ рендерираното дърво. За разлика от toJSON(), представянето е по-детайлно от това на toJSON(), и включва компоненти написани от потребителя. Най-вероятно не се нуждаете от този метод, освен ако не пишете своя собствена библиотека за проверки върху test renderer.

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 като опция, която ви позволява да използвате персонализирани имитиращи референции (mocked refs). createNodeMock приема текущия елемент и трябва да върне имитираща референция като обект. Това е полезно, когато тествате компонент, който разчита на референции.

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);