使用反應路由器進行酶集成測試測試 - 測試組件通過鏈接更新

Question

我想測試點擊鏈接是否更新了我的應用中的組件。

這裏是我的應用程序，當你點擊它呈現關於組件

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; 

這是我的測試：

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" 

我使用反應路由器v4，反應16和酶3.1

是否可以使用React Router和酶以這種方式進行測試？

Answer 1

Link的render function將檢查event.button === 0。這就是爲什麼如果沒有合適的參數，請致電simulate檢查失敗與酶。

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

祝你好運。