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

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

0 голосов
/ 28 декабря 2018

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

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

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

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

1 Ответ

0 голосов
/ 05 июня 2019

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

Для этого добавьте это в конфигурацию Jest: 

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

Файл /jest/react-spring-mock.js может выглядеть следующим образом: 

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

Примечание: эти макеты ориентированы на API рендеринга реквизита реактивной пружины.Кроме того, эта техника приведет к игнорированию всего, что обычно генерируется реагирующей пружиной в ваших тестах.(Вместо этого будет создан контейнер <div>.)

...