メニューを使ってコンポーネントをテストする方法

Question

Jestのスナップショットを使って、メニューを含むコンポーネントをテストしようとしています。問題は、メニューのコンテンツがレンダリングされないため、コンポーネント全体をテストできないということです。

メニューにすべてのMenuOptionを強制的にレンダリングする方法はありますか？私は<Menu opened={true}>...</Menu>を使用しようとしましたが、結果は同じでした。

たとえば、このコードではfooを含まないスナップショットが生成されます。

expect(renderer.create(
    <MenuContext> 
     <Menu> 
     <MenuOptions> 
      <MenuOption> 
      foo 
      </MenuOption> 
     </MenuOptions> 
     </Menu> 
    </MenuContext> 
)).toMatchSnapshot(); 

Answer 1

Menuコンポーネントが反応し、ネイティブのzインデックス処理の問題を克服するために、直接MenuOption秒レンダリングされません。さらに、最初にそれの寸法などを取得する必要があります。テストでレンダリングされるまで、より多くのステップが必要になります。

しかし、ライブラリ自体にはたくさんのテストがあり、私の意見では、テストはライブラリの内部処理に依存してはならないと考えています。代わりに、あなたはそれを模倣する必要があります。

import 'react-native'; 
import React from 'react'; 

jest.mock('react-native-popup-menu',() => ({ 
    Menu: 'Menu', 
    MenuContext: 'MenuContext', 
    MenuOptions: 'MenuOptions', 
    MenuOption: 'MenuOption', 
    MenuTrigger: 'MenuTrigger', 
})); 

import BasicExample from '../BasicExample'; 

import renderer from 'react-test-renderer'; 

test('renders correctly',() => { 
    const tree = renderer.create(
    <BasicExample /> 
).toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

注 - あなたのモックとインポートが一致する必要があります。 （Menuは2通りの方法でインポートできます）。

あなたは素晴らしいスナップショットを取得します - example snapshot