1

这是一个大骗子。

出于某种原因，jest 和 babel 不会导入和转换 react-router 4 的 withRouter。

我最近从 react-router 3 更新到 react-router 4。我的单页应用程序通过 webpack 编译得很好，我可以在浏览器中导航我的本地开发版本。

但是，涉及使用 withRouter HOC 包装的组件的测试会失败。

具体来说，如果正在测试的组件有一个使用 withRouter HOC 的后代组件，你甚至不能导入 withRouter。控制台日志显示 withRouter 被导入为“未定义”

该文件夹包含以下文件。

app/
├── src/
    ├── LoginContainer.jsx
    ├── LoginForm/
        ├── index.js
        └── LoginForm.jsx

LoginContainer（一个反应容器组件）

import React from 'react';
import PropTypes from 'prop-types';
import LoginForm from './LoginForm';

export default class LoginContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentForm: props.form };
    this.changeForm = this.changeForm.bind(this);
  }

  changeForm(form) {
    // handle when someone changes something.
  }

  render() {
    return (
      <section>
        <LoginForm {...this.props} changeForm={this.changeForm} data-form={this.state.currentForm} />
      </section>
    );
  }
}

LoginForm/index.js（基本上是一个包装了 LoginForm.jsx 的 HOC）

import LoginForm from './LoginForm';
import { withRouter } from 'react-router';

// NO MATTER WHAT I DO...
// withRouter is undefined.
// If I do import * as bob from 'react-router'
// bob then equals { default: {} }
// bob is blank!

export default withRouter(LoginForm);

由于某种原因，我无法在测试时导入 withRouter。所有其他模块都可以正常导入，只有 withRouter 会导致问题。

  • react-router 4.2.0 和 react-router-dom 4.2.2 都作为依赖安装
  • 其他使用 Link 或 Route 之类的组件通过测试就好了

更新

我认为这与 jest + babel 有关。如果我将 import 语句切换为 require 语句，它就可以工作！

import LoginForm from './LoginForm';

// THIS WORKS! But I don't want to deviate from ES6 just for a test.
const withRouter = require('react-router/index.js').withRouter;

export default withRouter(LoginForm);
4

0 回答 0