JEST react-testing-library 无法读取未定义的属性“推送”答案

【问题标题】：JEST react-testing-library Cannot read property 'push' of undefinedJEST react-testing-library 无法读取未定义的属性“推送”
【发布时间】：2020-04-13 05:49:09
【问题描述】：

import React from 'react';
import { Provider } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { store } from './store';
import Routes from './router/router';

const App: React.FC<RouteComponentProps> = () => {
  return (
    <Provider store={store}>
      <Routes />
    </Provider>
  );
};

export default withRouter(App);

function renderWithRouterAndStore(
  ui,
  { route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {}
) {
  const Wrapper = ({ children }) => {
    return (
      <Provider store={store}>
        <IntlProvider locale="en">
          <MemoryRouter initialEntries={[route]}>
            <Route path="/login">{children}</Route>
          </MemoryRouter>
        </IntlProvider>
      </Provider>
    );
  };

  return {
    ...render(ui, { wrapper: Wrapper }),
    history,
  };
}

我有登录组件，当我提交表单时，如果登录成功，它会导航到“/”。

我正在使用this.props.history.push('/')

但我的测试用例失败，无法读取未定义的属性 'push'

如何使用 RouteComponentProps 测试 React 组件？

【问题讨论】：

标签： jestjs react-testing-library

【解决方案1】：

我不确定这是否是解决此问题的方法，但您可以像这样模拟 history.push：

let props = {
   history: historyMock
};
shallow(<LoginComponent {...props} />);

【讨论】：