1

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

最初のテストは成功し、2 番目 (値の 4 倍) は失敗します。ここで何が間違っているのかわかりません。

編集:

これを返すようにコンポーネントを変更すると、次のようになります。

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

そして次のようなテスト:

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

その後、それは通過します。したがって、テストが失敗するのは計算小道具を導入するときです。理由はよくわかりません。

4

1 に答える 1