We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 ПерекладиGitHub

Тестовий рендерер

Імпорт

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

Огляд

Цей пакет надає рендерер, який може рендерети React-компоненти в чисті JavaScript-об’єкти, без залежності від DOM або власного мобільного середовища.

По суті, цей пакет дозволяє легко зробити знімок ієрархії вигляду платформи (подібно до дерева 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">Привіт</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(['Під']);

TestRenderer

Екземпляр TestRenderer

TestInstance

Довідник

TestRenderer.create() 

TestRenderer.create(element, options);

Створює екземпляр TestRenderer з переданим елементом React. Він не використовує реальний DOM, але він все ще повністю рендерить дерево компоненту в пам’яті, щоб ви могли переконатися в його наявності. Повертає екземпляр TestRenderer.

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> та їх реквізит, але не містить компонентів написаних користувачем. Це зручно для тестування з використанням знімків.

testRenderer.toTree() 

testRenderer.toTree()

<<<<<<< HEAD <<<<<<< HEAD Повертає об’єкт, що представляє відрендерене дерево. Представлений об’єкт – більш деталізований, ніж те, що повертає toJSON (), та включає в себе написані користувачем компоненти. Ймовірно, вам не потрібен цей метод, якщо ви не пишете власну бібліотеку тверджень поверх тестового рендерера. ======= Return an object representing the rendered tree. The representation is more detailed than the one provided by toJSON(), and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.

941f54180ef5e652221f54ef6d1f6f2e9e063597

Return an object representing the rendered tree. The representation is more detailed than the one provided by toJSON(), and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer. 6dcb963479953586f462ce31fddf35158c0598a0

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

Пропси, що відповідають цьому тестовому екземпляру. Наприклад, компонент <Button size="small"/> має {size: 'small'} як пропс.

testInstance.parent 

testInstance.parent

Батьківський тестовий екземпляр цього тестового екземпляру.

testInstance.children 

testInstance.children

Дочірні тестові екземпляри цього тестового екземпляру.

Ідеї

Функцію createNodeMock можна передати TestRenderer.create як опцію, яка дозволяє рефи макетів користувача. 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') {
        // макет як функція focus
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);
Is this page useful?Редагувати цю сторінку