1

反应组件：

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

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

4

1 回答 1

2

这有效：

  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 将创建两个元素，一个 forResult:和一个 for 12。Dan Abramov 有一篇很棒的文章，它准确地描述了一个反应元素。

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

于 2016-05-12T21:56:30.280 回答