我已经用ReactJS编写了这个应用程序:
// @flow
import React from "react";
import { combineReducers, createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import RecipeShowPage from "./screens/RecipeShowPage";
import RecipeIndexPage from "./screens/RecipeIndexPage/RecipeIndexPage";
import { BrowserRouter as Router, Route } from "react-router-dom";
export const App = () => {
return (
<Provider store={store}>
<div style={styles.appContainer}>
<Router>
<Route exact path="/" component={RecipeIndexPage} />
<Route
path="/recipes/:id/:slug"
render={routerProps => {
return <RecipeShowPage {...routerProps} />;
}}
/>
</Router>
</div>
</Provider>
);
};
export default App;
import React, { Component } from "react";
import { connect } from "react-redux";
import CookView from "../containers/CookView";
export class RecipeShowPage extends Component {
render() {
const recipe = this.props.recipes.find(
r => r.id === this.props.match.params.id
);
return <CookView recipe={recipe} />;
}
}
export default connect(({ recipes }) => ({ recipes: recipes.recipes }))(
RecipeShowPage
);
在CookView
中引用的RecipeShowPage
呈现了RecipeSummary
,后者呈现了带有标题的<h1>
。我在浏览器中运行该应用程序,可以从索引页面导航到显示页面,并且可以确认其中有h1
。
但是,此测试失败:
import React from "react";
import { shallow, mount } from "enzyme";
import { App } from "../src/App";
describe("App routing", () => {
const wrapper = mount(<App />);
const links = wrapper.find("a");
it("should show the collection of recipes", () => {
expect(links.length).toEqual(2);
});
it("should navigate to the recipe show page when a recipe is clicked", () => {
links.at(0).simulate("click");
expect(wrapper.find("h1").text()).toEqual(
"Chocolate Chip Cookies"
);
});
});
// Test failure:
expect(received).toEqual(expected) // deep equality
Expected: "Chocolate Chip Cookies"
Received: "Recipes"
我对酶很陌生。在测试中,路由似乎没有发生– h1
包含索引页面中的Recipes
。我猜我应该在simulate('click')
之后等待还是重新渲染?