반응 라우터를 이용한 효소 통합 테스트 테스트 - 링크로 테스트 구성 요소 업데이트

Question

링크를 클릭하면 앱의 구성 요소가 업데이트되는지 테스트하고 싶습니다.

이

import React from 'react'; 
import Adapter from 'enzyme-adapter-react-16'; 
import Enzyme from 'enzyme'; 
import { mount } from "enzyme"; 
import { MemoryRouter} from 'react-router-dom' 
import App from './App'; 

Enzyme.configure({ adapter: new Adapter() }); 


// this test passes as expected 
it('renders intitial heading as home',() => { 
    const wrapper = mount(
    <App /> 
); 

    const pageHeading = wrapper.find("h1").first().text() 
    expect(pageHeading).toEqual('home'); 
}); 

it('renders about heading when we navigate to about',() => { 
    const wrapper = mount(
    <App /> 
); 

    const link = wrapper.find("Link").first(); 
    link.simulate('click'); 

    const pageHeading = wrapper.find("h1").first().text() 
    expect(pageHeading).toEqual('about'); 
}); 

두 번째 테스트가 실패 :

FAIL src/App.test.js 
    ● renders about heading when we navigate to about 

    expect(received).toEqual(expected) 

    Expected value to equal: 
     "about" 
    Received: 
     "home" 

나는 그 구성 요소에 관하여

import React, { Component } from 'react'; 
import './App.css'; 
import { 
    MemoryRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 


const Home =() => <h1>home</h1> 
const About =() => <h1>about</h1> 

class App extends Component { 
    render() { 
    return (
     <Router> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/">Home</Link></li> 
     </ul> 
     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     </Router> 
    ); 
    } 
} 

export default App; 

를 렌더링 그리고 여기 내 테스트입니다에 대해 당신이 클릭 할 때 다음

는 내 응용 프로그램입니다 반응 라우터 v4, 반응 16, 효소 3.1

반응 라우터와 효소를 사용하여 이런 식으로 테스트 할 수 있습니까?

Answer 1

링크 render function은 event.button === 0을 확인합니다. 적절한 파라메터없이 simulate으로 전화하면 효소 검사가 실패하는 것입니다.

는 link.simulate('click', { button: 0 });

행운을보십시오.