我的酶/摩卡测试有什么问题?

时间:2016-05-12 21:13:58

标签: reactjs mocha enzyme

反应组件:

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

然后它过去了。所以当我介绍测试失败的计算道具时。我不确定为什么。

1 个答案:

答案 0 :(得分: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会为Result:创建两个元素,为12创建一个元素。丹·阿布拉莫夫(Dan Abramov)有一个excellent post来描述反应元素。

在您没有工作的测试中,您正在寻找具有一个文本节点的div,但渲染的是具有两个文本节点的div。通过在花括号中加入12,您将其强制转换为新的文本节点