테스트 구성 요소, 농담과 효소

Question

내가 반응 라우터를 사용하는 간단한 구성 요소가 (내가 알고 있어요이 알파 빌드입니다) 테스트하는 동안 구성 요소에 컨텍스트를 제공합니다. 내 구성 요소가 렌더링하는지 테스트 할 수 있도록하려면 - 나는 HomeLogin이 연결된 구성 요소이기 때문에 문제가 발생하는 효소의 mount() 또는 render(), 사용해야합니다 -

그러나 농담/효소와 나는 렌더링 shallow() 할 수 아니에요 옳은 일이지만 이 아니고은 그 안에 렌더링 된 구성 요소를 테스트합니다.

내 시험 :

it('Renders based upon matched route',() => { 
    let props = { 
    app: { health: true }, 
    }; 
    const component = render(
    <Provider store={store}> 
     <MemoryRouter location="/"> 
     <Jumbotron {...props} /> 
     </MemoryRouter> 
    </Provider> 
); 
    expect(toJson(component)).toMatchSnapshot(); 
}); 

가 어떻게이 REDUX 저장소를 제공하는 데 또는 얕은 렌더링 사용하지 않고 경로에 따라이 구성 요소의 출력을 테스트 할 수 있습니다?

업데이트 :shallow()을 사용하려고하면 스냅 샷 렌더링이 출력되지 않습니다.

Answer 1

당신은 .find(Jumbotron)를 사용하고, 예를 들어, 스냅 샷으로 일치하는 것을 사용할 수 있습니다

const wrapped = component.find(Jumbotron); 
expect(toJson(wrapped)).toMatchSnapshot(); 

나는 withRouter()을 포함하는 좀 더 복잡한 예를했고 나는 스냅 샷으로 일치 전에 출력에서 ​​모든 키를 제거에 복원되었다. React-Router v4에 대한 테스트가 Jest와 스냅 샷 테스트를 통해 더욱 견고해질 때까지. 예 :

export function removeKeys(object) { 
    if (object === undefined || object === null) { 
     return object; 
    } 
    Object.keys(object).forEach((key) => { 
     if (typeof object[key] === 'object') { 
      removeKeys(object[key]); 
     } else if (key === 'key') { 
      delete object[key]; 
     } 
    }); 
    return object; 
} 

... 

expect(removeKeys(toJson(component))).toMatchSnapshot();