0
JSSコンポーネントのカプセル化のために、ReactコンポーネントをJestでテストするのに少し苦労しています。Jest/Enzymeを使ってReactコンポーネントをJSSスタイルのカプセル化でテストする方法？
擬似コード例：
JSS（style.js）：
{pinkOnYellow: 'MyComponent-pinkOnYellow-32423'}
export default {
pinkOnYellow: {
color: 'pink',
backgroundColor: 'yellow'
}
}
コンポーネントがインスタンス化される場合classesオブジェクトは幾分ようになり成分
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)
を反応させます
したがって、コンポーネントHTMLは冗談/酵素テストを書くとき、私はにマッピングされたものをクラス名を知らないので、私は簡単にクラスセレクタを使用することはできませんことを意味し
<div class="MyComponent-pinkOnYellow-32423" />
のようになります。 彼らはスーパー制限しているので、私はいくつかの解決策を見つけたと私は両方に不満だ：第二
第一
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)
})
第三1人の意志おそらくclassesというオブジェクトをProxyに入れてください。これは、環境がテストのときに値の代わりにキーを返しますが、ハッキーに見えますが、回避したい環境に応じてコンポーネントの違いにつながります。
私は両方の解決策が非常に制限されていると述べたので、私は正しい方向に私を指すことができる任意のアドバイスを歓迎します。