web-dev-qa-db-ja.com

React酵素テスト、未定義のプロパティ 'have'を読み取れません

Reactに Enzyme を使用してテストを書いています。

私のテストは非常に簡単です：

import OffCanvasMenu from '../index';
import { Link } from 'react-router';

import expect from 'expect';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import React from 'react';

describe('<OffCanvasMenu />', () => {
  it('contains 5 <Link /> components', () => {
    const wrapper = shallow(<OffCanvasMenu />);
    expect(wrapper.find(<Link />)).to.have.length(5);
  });
});

このコードは基本的に airbnb/enzyme docs から直接取得されますが、エラーを返します：

FAILED TESTS:
  <OffCanvasMenu />
    ✖ contains 5 <Link /> components
      Chrome 52.0.2743 (Mac OS X 10.11.6)
    TypeError: Cannot read property 'have' of undefined

私はドキュメントとは違うことをしているのか少しわかりません。ガイダンスは大歓迎です。

testingreactjsenzyme
34
Toby

<Link />の代わりにLinkを使用します。

describe('<OffCanvasMenu />', () => {
  it('contains 5 <Link /> components', () => {
    const wrapper = shallow(<OffCanvasMenu />);
    expect(wrapper.find(Link)).to.have.length(5);
  });
});

Airbnb/enzyme docsの最初の例に表示されます。

  it('should render three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });
18
Ori Drori

EnzymeはドキュメントでChaiアサーションを使用しているため、expect(***).to.have.length(***)を使用する場合は、_chai-enzyme_をインストールし、expectを使用する必要があります。したがって、Jestスナップショットを使用するとexpect(***).toMatchSnapshot()で問題が発生しますが、この article は解決に役立つため、両方を実行できます。

29
Khrystyna Skvarok

これは、chaiアサーションライブラリが依存関係にインストールされていないか、テストファイルにインポートされていないことが原因である可能性があります。したがって、chai-enzymeをインストールして、テストファイルにインポートする必要があります。

npm install chai

「chai」から{予想}をインポートします。

8
Awesome

このエラーは、expect(...)の括弧内に_.to.have_が誤って配置されるように、括弧を誤って配置した場合に発生する可能性があります。

正しい：

_expect(wrapper.find(<Link />)).to.have.length(5);
_

原因TypeError：未定義のプロパティ「have」を読み取ることができません：

_expect(wrapper.find(<Link />).to.have.length(5));
_
0
Jon Schneider