Question

我正在尝试使用动态导入加载模块的Mocha和Enzyme测试React组件。

当我尝试测试依赖于动态导入的逻辑时，我得到的结果不正确。问题是异步函数在测试完成之前没有完成，所以我永远无法获得准确的结果。

我该如何处理这种情况？

组件

import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

// styles

import styles from './PasswordStrengthIndicator.scss';

class PasswordStrengthIndicator extends React.Component {
  static defaultProps = {
    password: undefined,
    onPasswordChange: undefined,
  }

  static propTypes = {
    password: PropTypes.string,
    onPasswordChange: PropTypes.func,
  }

  constructor() {
    super();

    this.state = {};
  }

  componentWillMount() {
    this.handlePasswordChange();
  }

  componentWillReceiveProps(nextProps) {
    const password     = this.props.password;
    const nextPassword = nextProps.password;

    if (password !== nextPassword) {
      this.handlePasswordChange();
    }
  }

  render() {
    const strength = this.state.strength || {};
    const score    = strength.score;

    return (
      <div className={ styles.passwordStrength }>
        <div className={ classNames(styles.score, styles[`score-${score}`]) } />
        <div className={ styles.separator25 } />
        <div className={ styles.separator50 } />
        <div className={ styles.separator75 } />
      </div>
    );
  }

  // private

  async determineStrength() {
    const { password } = this.props;
    const zxcvbn = await import('zxcvbn');

    let strength = {};

    if (password) strength = zxcvbn(password);

    return strength;
  }

  async handlePasswordChange() {
    const { onPasswordChange } = this.props;
    const strength = await this.determineStrength();

    this.setState({ strength });

    if (onPasswordChange) onPasswordChange(strength);
  }
}

export default PasswordStrengthIndicator;

测试

describe('when `password` is bad', () => {
  beforeEach(() => {
    props.password = 'badpassword';
  });

  it.only('should display a score of 1', () => {
    const score = indicator().find(`.${styles.score}`);

    expect(score.props().className).to.include(styles.score1); // should pass
  });
});

Answer 1

有几种方法可以解决这个问题，简单便宜又肮脏的方法是在合理的时间内延迟预期。这会将测试变成异步测试，因此您需要在断言后使用done方法告诉mocha测试已完成...

it('should display a score of 1', (done) => {
  setTimeout(() => {
    const score = indicator().find(`.${styles.score}`);

    expect(score.props().className).to.include(styles.score1);
    done() // informs Mocha that the async test should be complete, otherwise will timeout waiting
  }, 1000) // mocha default timeout is 2000ms, so can increase this if necessary
});

另一种更为复杂的方法是使用类似Sinon的方式将对import的调用存根，并使用动态加载的组件手动返回已解析的promise。

必须承认我之前没有尝试使用webpack方法，因此可能比平常更麻烦。试试简单版本，看看它是怎么回事。

Answer 2

我能够通过 - 某事完成此任务。

我将依赖动态导入的测试切换为异步。然后我创建了一个函数，该函数呈现组件并返回一个promise，它动态地导入我试图在组件中导入的模块。

const render = () => {
  indicator = shallow(
    <PasswordStrengthIndicator { ...props } />,
  );

  return (
    Promise.resolve()
      .then(() => import('zxcvbn'))
  );
};

我认为这只是等待相同的概念，因为import('zxcvbn')将花费足够的时间在两个地方导入。

这是我的测试代码：

describe('when `password` is defined', () => {
  describe('and password is bad', () => {
    beforeEach(() => {
      props.password = 'badpassword';
    });

    it('should display a score of 1', (done) => {
      render()
        .then(() => {
          const score = indicator.find(`.${styles.score}`);

          expect(score.props().className).to.include(styles.score1);

          done();
        });
    });
  });
});

这最终得到了解决，因为它阻止了我的存根，我没有必要改变我的组件的实现来更好地支持存根。它也不像等待x ms那样随意。

我现在打开这个问题，因为社区可能提供更好的解决方案。

使用动态导入测试React组件（酶/摩卡）

2 个答案: