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来描述反应元素。

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

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

1 个答案: