Jest/Enzyme을 사용하여 JSS 스타일 캡슐화로 반응 성분을 테스트하는 방법?

JSS 컴포넌트 캡슐화 때문에 Jest로 내 React 컴포넌트를 테스트하는 데 조금 어려움을 겪고 있습니다.Jest/Enzyme을 사용하여 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" />

처럼 보일 것입니다. 나는 몇 가지 해결책을 발견하고 슈퍼의 규제이기 때문에 나는 모두 불행 해요 :

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

3 일 것입니다 아마도 이라는 객체를 Proxy에 넣으십시오. 환경 변수가 테스트 일 때 값 대신 키를 반환하지만 해커처럼 보이고 피하고 싶은 환경에 따라 구성 요소가 달라지게됩니다.

내가 언급했듯이 두 솔루션 모두 매우 제한적이므로 올바른 방향으로 나를 안내 할 수있는 조언이나 조언을 부탁드립니다.

출처

2017-10-19 LJ Wadowski

격리 된 구성 요소를 테스트 중이며 충돌 가능한 클래스 이름이없는 것으로 가정합니다. 이 경우 자신 만의 클래스 이름 생성기 http://cssinjs.org/js-api?v=v9.0.0#generate-your-own-class-names을 정의하고 간단한 스타일 객체 키를 클래스 이름으로 사용할 수 있습니다.

출처

2017-10-19 08:50:01

Jest/Enzyme을 사용하여 JSS 스타일 캡슐화로 반응 성분을 테스트하는 방법?

답변

관련 문제