如何在React Router中测试导航

时间:2019-07-09 00:45:41

标签: reactjs enzyme

我已经用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')之后等待还是重新渲染?

0 个答案:

没有答案