测试：使用 Jest/Enzyme 寻找风格化的情感成分

Question

我将一个项目从魅力转移到情感。 唯一丢失的拼图？ 测试。

在 glamorous 中，我可以找到带有以下选择器的元素：

$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');

我希望这有帮助。