reactjs - 在 Enzyme 测试中更改 MemoryRouter 中的路由路径

Question

我正在尝试测试一个组件，该组件通过在 Enzyme 中创建一个包装器来监听正在更改的历史记录，该包装器将我的组件放置在 MemoryRouter 中；即:

mount(
  <MemoryRouter initialEntries={'/path/param1}>
    <Switch>
      <Route
        path="/path"
        component={MyComponent}
      />
  </Switch>
</MemoryRouter>
)

对于初始路径，这工作得很好，但是，我特别想测试当它从 /path/param1 开始但随后历史记录更改为 /path/时会发生什么参数2

路径的监控是通过使用 withRouter 包装组件的导出来完成的，如下所示:

export default withRouter(MyComponent)

然后在构建时，我使用 history.listen 来订阅历史更改。

Answer 1

您可以使用底座<Route>具有自定义组件history反对这样做。

首先，安装history包(如果您仅在测试中使用它，则为 devDevpendency)。

在您的测试文件中:

// we are using memory history only
import { createMemoryHistory } from 'history';
import { Router, Route} from 'react-router-dom';

然后，像这样设置你的组件:(如果只有一条路由，你可以删除 Switch)

const history = createMemoryHistory({
  initialEntries: ['/path/param1'],
});

// mount with custom history object
mount(
  <Router history={history}>
    <Route
      path="/path"
      component={MyComponent}
    />
  </Router>
)

稍后在测试中，您可以检查 history 的当前位置。在你的组件完成它的事情之后。

// check current path has been changed
expect(history.entries[0].pathname).to.eq('/path/param2');

您可以通过 history 找到您可以访问的所有其他内容这里: https://github.com/ReactTraining/history