Question

由于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测试时，我不能轻易使用类选择器，因为我不知道映射到哪个类名。我发现了一些解决方案而且我对这两种解决方案都不满意，因为它们是超级限制的：

第一

it('should be shallow as my soul', () => {
   const imageGallery = shallow(<ImageGallery images={images} />)
   expect(timageGallery.find('[class^=pinkOnYellow]')).toBe(1)
})

第二名（不适用于浅层）

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中，它会在环境测试时返回键而不是值，但是看起来很糟糕，导致组件的差异取决于环境而我我想避免。

正如我所提到的，这两种解决方案都非常受限制，因此我将非常感谢能够指出正确方向的任何建议/意见。

Answer 1

我假设您正在测试隔离的组件，并且不存在类名冲突。在这种情况下，您可以定义自己的类名生成器http://cssinjs.org/js-api?v=v9.0.0#generate-your-own-class-names，并使用简单样式对象键作为类名。

如何使用Jest / Enzyme来测试具有JSS样式封装的React组件？

1 个答案: