我的 Enzyme/Mocha 测试有什么问题？

Question

React 组件：

import React, { Component, PropTypes } from 'react';

export default class Simple extends Component {
  render() {
    return <div className="Simple">
      Result: {this.props.value * 4}
    </div>
  }
}

Simple.propTypes = {
  value: PropTypes.number,
};

测试：

describe('<Simple />', _ => {
  it('should display', done => {
    const wrapper = shallow(<Simple />);

    expect(wrapper.find('div.Simple')).to.have.length(1);
    done();
  });

  it('should quadruple a value passed into it', done => {
    const wrapper = shallow(<Simple value={3} />);

    expect(wrapper.contains(<div className="Simple">Result: 12</div>)).to.equal(true);
    done();
  })
});

第一个测试通过，第二个（四倍值）失败。我不知道我在这里做错了什么。

编辑：

如果我将组件修改为 return 这个：

return <div className="Simple">
  Result:
</div>

测试如下：

expect(wrapper.contains(
  <div className="Simple">
    Result:
  </div>
)).to.equal(true);

然后就过去了。所以当我引入计算道具时，测试失败了。我不太确定为什么。

Answer 1

这个有效：

  it('should quadruple a value passed into it', done => {
    const wrapper = shallow(<Simple value={3} />);

    expect(wrapper.contains(<div className="Simple">Result: {12}</div>)).to.equal(true);
    done();
  })

这是因为 div 中有两个子元素。如果你使用 console.log(wrapper.find('div').childAt(1).text()) 你可以看到这个，这给你 12.

shallow 基本上是 react-addons-test-utils 浅层渲染器的包装器。这样做是执行您的组件渲染方法和 returns 生成的反应元素。在这种情况下，React 将创建两个元素，一个用于 Result:，一个用于 12。 Dan Abramov 有一个 excellent post 准确描述了反应元素是什么。

在你的测试中没有工作，你正在寻找一个带有一个文本节点的 div，但呈现的是一个带有两个文本节点的 div。通过将 12 放在花括号中，您已将其强制放入新的文本节点

我的 Enzyme/Mocha 测试有什么问题？

What's wrong with my Enzyme/Mocha test?

mocha.js

reactjs

enzyme