javascript - 测试:使用Jest/Enzyme查找样式化的情感成分

我从一个迷人的项目迁移到一个情感项目。唯一缺少的拼图？测试。

在迷人的环境中，我可以找到具有以下选择器的元素：

$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"]')

有没有更好的办法？谢谢阅读！

最佳答案

在定义样式组件的displayName时，仍然可以使用第一种方法。

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

这将使您可以在测试过程中使用以下缩写查找：

$component.find('StyledComponent');

我希望这有帮助。