测试:使用 Jest/Enzyme 寻找风格化的情感成分
Posted
技术标签:
【中文标题】测试:使用 Jest/Enzyme 寻找风格化的情感成分【英文标题】:Testing: Finding styled emotion components with Jest/Enzyme 【发布时间】:2019-06-06 19:35:31 【问题描述】:我将一个项目从光鲜亮丽转移到了情感上。唯一缺失的拼图?测试。
在魅力四射中,我可以找到带有如下选择器的元素:
$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"]')
有没有更好的方法?感谢阅读!
【问题讨论】:
【参考方案1】:您仍然可以通过在定义样式组件时设置样式组件的displayName
来使用第一种方法。
const StyledComponent = styled('div')` // ... `;
StyledComponent.displayName = 'StyledComponent';
这将允许您在测试期间找到带有首字母的:
$component.find('StyledComponent');
我希望这会有所帮助。
【讨论】:
以上是关于测试:使用 Jest/Enzyme 寻找风格化的情感成分的主要内容,如果未能解决你的问题,请参考以下文章
使用 Jest / Enzyme 在 React 中的功能组件内部测试方法