2

由于 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)
})

第三个可能是将classes对象包装在 aProxy中，当环境被测试时，它将返回键而不是值，但它看起来很hacky，并导致组件因我想避免的环境而有所不同。

正如我所提到的，这两种解决方案都非常受限制，因此我将不胜感激任何可以为我指明正确方向的建议/想法。

4

1 回答 1

0

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

于 2017-10-19T08:50:01.700 回答