我的酶/摩卡测试出了什么问题？

Question

反应组件：

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 <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 的浅层渲染器的包装器。它的作用是执行您的组件渲染方法并返回结果反应元素。在这种情况下，react 将创建两个元素，一个用于Result:，一个用于12。 Dan Abramov 有一个 excellent post，它准确地描述了一个 react 元素。

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