Этот пакет предоставляет средство рендеринга 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);
0 комментариев