Я написал это приложение в ReactJS:
app.js
// @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;
RecipeShowPage.js
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')
?