React-Testing-Library - Компонент обтекания с Redux и маршрутизатором - PullRequest
1 голос
/ 23 апреля 2019

Я пытаюсь настроить тестовый файл для отображения маршрута / страницы в моем приложении.Я пытаюсь обернуть все с Redux и Router, и вот что у меня есть:

import React from 'react';
import { render } from 'react-testing-library';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from '../../store/reducer';
import {Link, Route, Router, Switch} from 'react-router-dom'
import {createMemoryHistory} from 'history'

import ViewNode from '../Pages/ViewNode';


const customRender = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    initialState,
    store = createStore(reducer, initialState),
    ...options
  } = {}
) => ({
  ...render(
    <Provider store={store}>
      <Router history={history}>{ui}</Router>
    </Provider>,
    options
  ),
  history,
});

test('can render with redux and router', () => {
  const { getByTestId } = customRender(
    <Route path="/server/:env/:nodeName">
      <ViewNode />
    </Route>,
    {
      route: '/server/prod/some.server.name.com',
    }
  );

  expect(getByTestId('page-content')).toBeVisible()
})

Тогда я получаю следующую ошибку:

Error: Uncaught [TypeError: Cannot read property 'params' of undefined]

Причина, по которой это вызывает ошибку, заключается в том, что он не может найти параметры React Router.В конструкторе компонента происходит сбой, когда я инициализирую состояние:

this.state = {
            modal: false,
            activeTab: '1',
            imageStatus: "loading",
            env: props.match.params.env, //failing here
            nodeName: props.match.params.nodeName,
            environments: props.environments,
           }

Похоже, что он неправильно упаковывает маршрутизатор с моей реализацией выше.

Как правильно обернуть свой компонент страницы с помощью Redux и Router, чтобы он мог получить эти параметры маршрутизатора?

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