1

Enzyme 浅いレンダリングを使用してテストしている SFC があります。このステートレス コンポーネントに小道具としてインライン スタイルを持つスタイル オブジェクトを渡しています。ただし、単体テストを適用すると、未定義が返されます。このコンポーネントは、渡されたものを小道具として返すだけであり、何も渡されたりレンダリングされたりしないため、未定義になっていることを理解しているため、それで問題ないかどうかはわかりません。これに対する回避策はありますか?

const LoginForm = ({ style, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <div style={_.get(style, 'container')}>
        {inputFields}
      </div>
    </form>
  );
};

テスト：

it('should apply styles to first div', () => {
        const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>);
        expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'});
      });
4

1 に答える 1

2

これが失敗する理由はいくつかあります。

まず、Enzyme の浅いラッパー API を正しく使用していないようです。

浅いラッパーから特定の小道具を取得したい場合は、使用する必要があります.props()(つまり、「s」を忘れました)。

wrapper.find('div').first().props('style')

ただし、この修正を行っても、テストでは失敗します。これは、テストで{display: 'inline'}は prop として渡しているが、実装でstyle呼び出されるプロパティを探しているためです。オブジェクトのパスで値を取得するcontainerを使用していると思います。提供しているオブジェクトにはプロパティがないため、div のprop は と等しくなり、これを と比較しようとするとテストは失敗します。lodash.getcontainerstyle{style: undefined}{display: 'inline'}

于 2016-08-12T22:13:23.710 に答える