使用反应路由器进行酶集成测试测试 - 测试组件通过链接更新

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 });

祝你好运。