由于JSS组件封装，我在使用Jest测试我的React组件时遇到了一些麻烦 .
伪代码示例：
JSS（ style.js ）：
export default {
pinkOnYellow: {
color: 'pink',
backgroundColor: 'yellow'
}
}
反应组件
import { withStyles } from 'material-ui/styles'
import compose from 'recompose/compose'
import classes from './style.js'
const MyComponent = ({classes}) =>{
<div className={classes.pinkOnYellow} />
}
export default compose(withStyles(style))(MyComponent)
当组件被实例化时， classes 对象看起来有点像：
{pinkOnYellow: 'MyComponent-pinkOnYellow-32423'}
因此组件HTML看起来像
<div class="MyComponent-pinkOnYellow-32423" />
这意味着在编写Jest / Enzyme测试时，我不能轻易使用类选择器，因为我不知道映射到哪个类名 . 我发现了一些解决方案而且我对两者都不满意，因为它们超级限制：
1
it('should be shallow as my soul', () => {
const imageGallery = shallow(<ImageGallery images={images} />)
expect(timageGallery.find('[class^=pinkOnYellow]')).toBe(1)
})
2号（不浅用）
function getClassesByEnzymeInstance(instance, className) {
const componentName = instance.name()
const classNameMapped = `.${instance.find(componentName).props('classes').classes[className]}`
return classNameMapped
}
it('should be not as shallow', () => {
const imageGallery = mount(<ImageGallery images={images} />)
const mappedClassName = getClassesByEnzymeInstance(ImageGallery, 'pinkOnYellow')
expect(timageGallery.find(mappedClassName)).toBe(1)
})
第3个可能会将 classes 对象包装在 Proxy 中，当环境测试时它将返回键而不是值，但是看起来很容易导致组件的差异取决于我想避免的环境 .
正如我所提到的，这两种解决方案都非常受限制，因此我将非常感谢能够指出正确方向的任何建议/意见 .
1 回答
我假设您正在测试隔离的组件，并且不存在类名冲突 . 在这种情况下，您可以定义自己的类名生成器http://cssinjs.org/js-api?v=v9.0.0#generate-your-own-class-names，并使用简单样式对象键作为类名 .