J'ai un peu de mal à tester mes composants React avec Jest à cause de l'encapsulation des composants JSS.Comment utiliser Jest/Enzyme pour tester les composants React avec l'encapsulation de style JSS?
pseudo exemple de code:
JSS (style.js):
export default {
pinkOnYellow: {
color: 'pink',
backgroundColor: 'yellow'
}
}
React composant
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)
Lorsque le composant est instancié objet classes regardera un peu comme:
{pinkOnYellow: 'MyComponent-pinkOnYellow-32423'}
composant conséquent HTML ressemblera
<div class="MyComponent-pinkOnYellow-32423" />
Cela signifie que lors de l'écriture Jest/test Enzyme Je ne peux pas utiliser facilement sélecteurs de classe parce que je ne sais pas quel nom de classe a été mis en correspondance. J'ai trouvé quelques solutions et je suis malheureux à la fois parce qu'ils sont super restriction:
1er
it('should be shallow as my soul',() => {
const imageGallery = shallow(<ImageGallery images={images} />)
expect(timageGallery.find('[class^=pinkOnYellow]')).toBe(1)
})
2 (ne fonctionne pas avec peu profonde)
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ème sera être probablement l'emballage classes objet dans un Proxy qui va retourner les clés au lieu de valeurs lorsque l'environnement est test mais il semble hacky et conduit à avoir des différences de composants en fonction de l'environnement que je voudrais éviter. Comme je l'ai mentionné les deux solutions sont très limitées donc j'apprécierai tous les conseils/ides qui peuvent me diriger dans la bonne direction.