web-dev-qa-db-ja.com

Enzymeで子コンポーネントメソッドをテストする方法は？

私はそのようなコンポーネントを持っています：

_<Parent>
  <Child/>
</Parent>
_

および_<Child/>_コンポーネントにはfooメソッドがあります。 fooメソッドをテストしたいのですが、アクセス方法がわかりません。私は試した：

_mount(<Parent><Child/></Parent>).props().children.foo
_

または

_mount(<Parent><Child/></Parent>).children().foo
_

両方ともundefinedです。ルートではないため、.instance()は使用できません。 _<Child/>_をマウントできないのは、_<Parent>_がcontextに何か（React-Routerの_context.router_）を追加し、_<Child/>_を初期化するときに必要だからです。これで何かアイデアはありますか？

javascriptreactjsreact-routerenzyme
23
Fomahaut

私は酵素からのフルマウントよりも浅いマウントを好みます。

Proxyquireと連携して、子コンポーネント（テストする）を解決します

wrapper.find('Child1').props().propName

そしてそれをテストします。

または私は浅いを使用します

mount wrapper.dive()
4
Pawan Gangwani

親クラスのみのテストを作成してから、子のみをテストする別のテストファイルを作成することを検討します。

次を使用してコンポーネントをマウントしたら：

const component = mount(<Child>);

次に、以下を使用してそのメソッドにアクセスできます。

component.instance().methodname

その後、jest.fn（）でオーバーライドして適切にテストすることができます。

3
rnmalone

あなたの問題は、子コンポーネントをテストする方法とは大きく異なると思います。

私の最初の質問は、なぜ親コンポーネントのテストで特定のメソッドが子コンポーネントにあるかどうかを確認するのですか？

私見では、このコンポーネントに固有のテストが必要であり、このテストではメソッドが存在するかどうかを確認します。

答えなしで去らないために、.find(Child).instance().fooを試しましたか？

2
Arthur Almeida

これは私のために働いた：

mount(<Parent><Child/></Parent>).find(Child).instance().foo
2
jackocnr

次のような子関数のハンドルを取得することができました。関数を呼び出す最初の子を探していました-

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()
1
andy mccullough

MemoryRouter内の内部コンポーネントの関数をモックしようとすると、同様の問題が発生しました。

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);

私はそのように関数をモックできるようになりました：

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;
1
pmaher

同様の問題に直面し、mount AP​​Iをログに記録しました。ユースケースでは、子コンポーネント（CommonStoresReactions）はmobx injectでラップされています。

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

clearStoresでCommonStoresReactionsメソッドをテストしたい。以下のスニペットは私のために働いた。

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()
0
Anesh