reactjs - 使用 Jest 和 Enzyme 测试 react 路由器重定向

Question

我有一个使用react-router的简单React组件，如果用户没有查看特定路由的权限，它会重定向用户:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {permission: false};
  }

  render() {
    return (
      <Switch>
        <Route exact path="/users">
          <h2>A list of users</h2>
        </Route>
        <Route path="/users/:userId">
          {({match}) => this.state.permission ? <h1>{match.params.userId}</h1> : <Redirect to="/users" />}
        </Route>
      </Switch>
    );
  }
}

我正在尝试测试访问 /users/:userId 时的不同场景使用 Jest 和 Enzyme，但在用户有权限的情况下无法使测试成功。

我的测试如下:

describe("render()", () => {
  describe("when route is /users/:userId", () => {
    let wrapper;
    let app;
    beforeEach(() => {
      wrapper = mount(
        <MemoryRouter initialEntries={["/users/1"]}>
          <App />
        </MemoryRouter>
      );
      app = wrapper.find(App).instance();
    });

    describe("when user has permission", () => {
      beforeEach(() => {
        app.setState({permission: true});
      });

      it("should show users id", () => {
        expect(wrapper.exists("h1")).toBe(true);
      });
    });

    describe("when user doesn't have permission", () => {
      beforeEach(() => {
        app.setState({permission: false});
      });

      it("should redirect to users list", () => {
        expect(wrapper.exists("h2")).toBe(true);
      });
    });
  });
});

第一个测试失败，而第二个测试成功。我用过console.log(wrapper.debug());在第一个测试中，它显示该组件正在渲染第一条路线(即被重定向)，并且我已经打印出了状态，因此我可以看到 setState通话正常。

我应该如何重写我的测试才能使其正常工作？

Answer 1

问题

初始位置设置为/users/1但是当组件首次安装时，它会呈现 Redirect它将位置设置为 /users .

permission然后设置为 true但由于位置是 /users结果是<h2>A list of users</h2> .

<小时/>

解决方案

设置后permission至true ，将位置设置为/users/1所以位置是正确的并且测试成功渲染 <h1>1</h1> :

describe("render()", () => {
  describe("when route is /users/:userId", () => {
    let wrapper;
    let app;
    beforeEach(() => {
      wrapper = mount(
        <MemoryRouter initialEntries={["/users/1"]}>
          <App />
        </MemoryRouter>
      ); // the Redirect sets location to /users during the initial render
      app = wrapper.find(App).instance();
    });

    describe("when user has permission", () => {
      beforeEach(() => {
        app.setState({permission: true});
        wrapper.instance().history.replace('/users/1'); // replace the MemoryRouter location with /users/1
        wrapper.update(); // update the wrapper with the changes
      });

      it("should show users id", () => {
        expect(wrapper.exists("h1")).toBe(true); // SUCCESS
      });
    });

    describe("when user doesn't have permission", () => {
      beforeEach(() => {
        app.setState({permission: false});
      });

      it("should redirect to users list", () => {
        expect(wrapper.exists("h2")).toBe(true);
      });
    });
  });
});