我想测试点击链接是否会更新我的应用程序中的组件。
这是我的应用程序,当您单击“关于”时,它会呈现“关于”组件
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"
我正在使用 react router v4、react 16 和 enzyme 3.1
是否可以使用 React Router 和 enzyme 以这种方式进行测试?
最佳答案
链接的render function将检查 event.button === 0
。这就是如果您在没有适当参数的情况下调用 simulate
时 enzyme 检查失败的原因。
试试 link.simulate('click', { button: 0 });
祝你好运。
关于javascript - 使用 React router 进行 enzyme 集成测试测试 - 使用链接测试组件更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46651092/