Тестирование: поиск стильных компонентов эмоций с помощью Jest / Enzyme

Question

Я перевёл проект с гламурного на эмоционный. Единственный недостающий кусок головоломки? Тестирование.

В гламурном я мог бы найти элементы с селекторами, как эти:

$component.find('StyledComponent');

$component.find('StyledComponent[prop="value"]');

Это больше не работает. Лучший способ, который я нашел до сих пор:

import StyledComponent from 'my/ui/StyledComponent';

$component.find(StyledComponent);

$component.find(StyledComponent).filter('[prop="value"]');

Мне понравился первый способ, потому что он вообще не требовался для импорта компонента. Некоторые компоненты эмоций определяются в файле без их экспорта. В этих случаях это было бы еще более многословно:

$component.find('div[className*="StyledComponent"]');

$component.find('div[className*="StyledComponent"][prop="value"]'); // or
$component.find('div[className*="StyledComponent"]').filter('[prop="value"]')

Есть ли лучший способ? Спасибо за чтение!

Answer 1

Вы все еще могли бы использовать первый подход, установив стилизованный компонент displayName при его определении.

const StyledComponent = styled('div')` // ... `;
StyledComponent.displayName = 'StyledComponent';

Это позволит вам найти во время тестов с начальными:

$component.find('StyledComponent');

Надеюсь, это поможет.