효소 얕은 및 구성 요소 기반 UI로 테스트하는 방법은 무엇입니까?

Question

Semantic React UI library을 사용 중입니다.

<div className="EditTemplateMetaDataPage"> 
     <Page title={...}> 
      <Container text> 
      <Segment> 
       <Grid columns={1}> 
       <Grid.Column> 
        <Button ...> 

이 많은 사람들에게 흥미로운 일이 될 수도 있습니다 비슷한 재질 UI 또는 부트 스트랩 반작용과 같은 구성 요소 라이브러리 반응 사용 : 같은 코드는 종종 보인다.

우리는 한 단계 깊은 렌더링 때문에 우리가 정말 깊은 Button 매장 필요가있는 동안 우리는 현재, 단지 시각적 도우미 테스트에서, 제 1 <Grid> 구성 요소, 대신 shallow의 enzyme 라이브러리 mount를 사용 대신.

성능 때문에 피하기 위해 중복 테스트shallow을 사용하는 것이 좋습니다.

: (우리는 London school TDD를 수행하고 그 하위 구성 요소가 존재만을 확인하고 자신의 인터페이스를 적절하게 사용하는)

우리는 즉, 시각적 구성 요소에 대한 전용 CSS를 사용하여

<div className='ui one column grid'> 

대신 등장

<Grid columns={1}> 

그러나 이것이 최적의 방법인지는 확실하지 않습니다. 다른 아이디어가 있습니까? 이 경우 shallow(...)을 어떻게 사용할 수 있습니까?

Answer 1

은 실제로 당신이 선택과 같은 구성 요소를 사용하는 얕은 수 있도록, 그래서 당신처럼 뭔가를 할 수

import Button from '../Button' 

const page = shallow(<Page />) 

expect(page.find(Button).length).toBe(1) 

http://airbnb.io/enzyme/docs/api/selector.html