web-dev-qa-db-ja.com

酵素wrapper.stateはnullを返します

Enzymeユニットテストでコンポーネントのデフォルト状態を確認しようとしています。このために、私は次のコンポーネントを持っています：

import React, { Component } from 'react';

class Picker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sources: true
        };
    }
}

...

export default Picker;

最後に、私のユニットテストは次のようになります。

it('should contain `everything` as a default value', () => {
  const wrapper = mount(<Picker name='cnn' />);
  expect(wrapper.state('sources')).to.exist()
});

ここで直面している問題は、コンポーネントのデフォルト状態を取得できないことです。私が間違っていなければ、関数wrapper.state（ 'sources'）は 'true'を返すはずです。

私が見逃している他のステップはありますか？私が使用しているもの：

  • "react"： "^ 16.2.0"
  • "チャイ"： "^ 4.1.2"、
  • 「酵素」：「^ 3.2.0」、
  • "enzyme-adapter-react-16"： "^ 1.1.1"、
  • "jsdom"： "^ 11.5.1"、
  • "mocha"： "^ 4.0.1"、
  • "react-addons-test-utils"： "^ 15.6.2"
reactjsmochaenzyme
7
eduardo

私はこれとたくさん取り組んできました！ PickerはComponentのサブクラスであるため、探している状態は実際にはwrapperではなくwrapper.instance()に存在します。

shallowとmountの「ラッパー」の戻り値はまさにそれです：ラッパー。これは、テストしようとしている実際のコンポーネントではありません。コンポーネントが囲まれている小さな環境だと思います。

コンポーネントの状態、小道具、および関数についてアサーションを作成するために、次のことに到達することに成功しました。

const component = wrapper.instance()

次に、componentで、.state、.props、＆cを呼び出すことができます。

ご不明な点がございましたらお知らせください。

7
tmikeschu