Question

这是一个大佬。

出于某种原因，jest和babel不会导入和转换反应路由器4与路由器。

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

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

具体来说，如果被测试的组件具有使用withRouter HOC的后代组件，则甚至无法导入withRouter。控制台日志显示withRouter导入为“undefined”

该文件夹包含以下文件。

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);

获取“TypeError：（0，_reactRouter.withRouter）的Jest测试组件不是函数”

0 个答案: