Изменение пути маршрута в MemoryRouter в тестах Enzyme
Я пытаюсь протестировать компонент, который отслеживает изменение истории, создавая оболочку в Enzyme, которая помещает мой компонент в MemoryRouter; то есть:
mount(
<MemoryRouter initialEntries = {'/path/param1}>
<Switch>
<Route
path = "/path"
component = {MyComponent}
/>
</Switch>
</MemoryRouter>
)
Для начального пути это работает нормально, однако я специально хочу проверить, что происходит, когда он начинается, скажем, с /path/param1, но затем история изменяется на /path/param2
Мониторинг пути осуществляется путем упаковки экспорта компонента в withRouter, например:
export default withRouter(MyComponent)
А затем, после создания, я использую history.listen, чтобы подписаться на изменения истории.
Ответы 1
Для этого можно использовать базовый компонент <Route> с настраиваемым объектом history.
Сначала установите пакет history (в devDevpendencies, если вы используете его только в тестах).
В вашем тестовом файле:
// 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