Как проверить навигацию в React Router - PullRequest
0 голосов
/ 09 июля 2019

Я написал это приложение в 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')?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...