React Testing, Redux를 사용하지 않으려 고 노력하고 있습니까?

Question

나는 정말로, 정말로 길을 잃었다.

React 앱을 간단하게 유지하려고합니다. 나는 앱의 범위에 따라 Redux가 필요하다고 느끼지 않는다. 그러나 테스트에 관해서는, 내가 너무 많은 농구를 뛰어 넘어야 좋은 커버리지를 얻을 수있을 것 같습니다. 너무 바보 같아서 머리 속에서 틀리게해야합니다. 도와주세요? 예를 들어

,

class LoginForm extends Component {...} 

onHandleClick(e) { 
    if (this.state.username === '' && this.state.password === '') { 
    this.setState({ error: 'Invalid details', }); 
    } else { 
    this.setState({ error: '', }); 
    } 
} 

나는 state.error이 자격 증명이 비어있는 '잘못된 세부 정보'로 설정되어 있는지 확인합니다 테스트를 작성하고자합니다. 구성 요소를 탑재하고 인스턴스()에 액세스 할 수 있어야합니다. onHandleClick() - 제 생각에는?

나는 그것을 MemoryRouter에 포장해야하기 때문에 직접 마운트하지 않습니다. 왜냐하면 LoginForm이 올바른 자격 증명에 따라 리디렉션하기 때문입니다. 물론

, I

mount(<MemoryRouter><LoginForm /></MemoryRouter>); 

수 ...하지만 나는 래퍼의 인스턴스를()에 액세스 할 수 없습니다. onHandleClick() 더 이상 MemoryRouter이 방법이 없기 때문에,이 아이 내입니다.

내 구성 요소 중 자신의 방법이 무엇인지 전혀 알지 못했다면 테스트가 100 배 더 쉬울 것 같습니다. 모두 소품으로 통과했으며 테스트에서 모든 기능을 조롱했습니다. 모의 메서드를 사용하여 모든 구성 요소를 테스트하는 경우 ACTUAL 메서드가 작동한다는 것을 알고 있습니까?

Redux가 유일한 선택 인 것처럼 보입니다.하지만 정말 간단한 CRUD 응용 프로그램이 있으며이를 복잡하게 만들고 싶지는 않습니다. 단지 구성 요소를 테스트 할 수 있기를 원합니다. !

도와주세요.

Answer 1

IMHO 그런 종류의 것을 테스트하려면 Sinonhttp://sinonjs.org/ 을 사용해야합니다. 여기에 관한 기사가 있습니다. http://engineering.pivotal.io/post/stub-dont-shallow-render-your-child-components/

하지만 기본적으로 해결 방법은 sinon의 stub()과 spy() 사이에 있어야합니다.

디퍼를 테스트 해보고 싶다면 JEST을 사용해보세요. snapshoots를 기반으로하는 훌륭한 테스트 도구이기 때문에 렌더링 된 코드를 단순히 그 코드와 비교해보십시오. 그것은 또한 페이스 북에 의해 권장됩니다.

https://facebook.github.io/jest/