Как использовать Jest/Enzyme для тестирования компонентов React с инкапсуляцией в стиле JSS?

Question

Я немного борюсь с тестированием моих компонентов React с помощью Jest из-за инкапсуляции компонентов JSS.

Пример псевдокода:

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

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

Третий, вероятно, будет упаковкой classes объект в Proxy который будет возвращать ключи вместо значений, когда среда тестируется, но кажется хакерской и приводит к различиям в компонентах в зависимости от среды, которую я хотел бы избежать.

Как я уже упоминал, оба решения очень ограничены, поэтому я буду признателен за любые советы / рекомендации, которые могут указать мне правильное направление.

Answer 1

Я предполагаю, что вы тестируете изолированные компоненты, и конфликты имен классов невозможны. В этом случае вы можете определить свой собственный генератор имен классов http://cssinjs.org/js-api?v=v9.0.0 и использовать простые ключи объекта стиля в качестве имени класса.