如何用菜單測試組件

我想用Jest的快照測試一個包含菜單的組件。問題在於菜單的內容沒有呈現，所以我無法測試整個組件。如何用菜單測試組件

有沒有辦法強制菜單渲染其所有的MenuOption？我試圖使用<Menu opened={true}>...</Menu>，但結果是一樣的。

例如，此代碼將生成不包含foo的快照。

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

來源

2017-06-04 Parasithe

Menu組分不呈現MenuOption小號直接以克服與反應天然z索引處理問題。此外，它需要首先獲得它的尺寸等。它需要更多的步驟，直到你在測試中得到它們。

但是庫本身有很多測試，在我看來你的測試不應該依賴庫的內部處理。相反，你應該嘲笑它 - 例如

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可以通過兩種方式導入）。

然後你得到漂亮的快照 - 見example snapshot

來源

2017-06-06 21:45:27 sodik

如何用菜單測試組件

回答

相關問題