Тестирование снимков с помощью реактивной пружины / реактивного движения

Question

Я пытаюсь сделать снимок для тестирования моих компонентов React с помощью Jest и Enzyme. Некоторые компоненты имеют компонент анимации (импортируется из react-spring/react-motion) в них, которая выполняет функцию своего потомка. Это делает тестирование невероятно сложным. Я провел немало исследований и выдвинул 3 идеи:

• Используйте фермент mount сделать все, и снимок экрана проверить. Я обнаружил, что это невозможно / неэффективно для дорогих компонентов, а полученные снимки часто бывают очень тяжелыми (1–2 МБ).
• Используйте фермент shallow и снимок для тестирования компонента. Затем найдите компонент анимации, визуализируйте детей внутри него с помощью Enzyme's renderProp() и снимок тест их. Это работало отлично, пока я не обнаружил, что renderProp() не работает с <StaggeredMotion /> за react-motion а также react-spring, Обходной путь для этой проблемы явно вызывает функцию как .prop('children')(), а затем обмелеть все это, но код будет выглядеть грязно и трудно читать.
• Просто используйте энзим shallow и снимок для тестирования компонента. Остальные на стороне библиотеки.

Вопрос в том, какой из них использовать? Если ни один из них не достаточно хорош, каковы альтернативы? Заранее спасибо.

(Если вам нужен пример кода, я более чем рад предоставить)

Answer 1

I got around the problems with testing components that use react-spring by mocking react-spring for Jest.

To do so, add this to your Jest config:

[...]
"moduleNameMapper": {
    "^react-spring(.*)$": "<rootDir>/jest/react-spring-mock.js"
},

The file /jest/react-spring-mock.js can look like this:

const React = require('react');

function renderPropsComponent(children) {
    return React.createElement('div', null, children()({}));
}

export function Spring(props) {
    return renderPropsComponent(props.children);
};

export function Trail(props) {
    return renderPropsComponent(props.children);
};

export function Transition(props) {
    return renderPropsComponent(props.children);
};

export function Keyframes(props) {
    return renderPropsComponent(props.children);
};

export function Parallax(props) {
    return renderPropsComponent(props.children);
};

export const animated = {
    div: (props) => {
        return React.createElement('div', null, props.children)
    },
};

Note: these mocks are focused on the render-props API of react-spring. Also, this technique will results in ignoring everything that is normally generated by react-spring in your tests. (It will create a container <div> instead.)