So testen Sie Komponenten mit Menü

Question

Ich versuche, mit Jests Snapshots eine Komponente zu testen, die ein Menü enthält. Das Problem ist, dass der Inhalt des Menüs nicht gerendert wird, so dass ich die gesamte Komponente nicht testen kann.

Gibt es eine Möglichkeit, ein Menü zu zwingen, alle seine MenuOption zu rendern? Ich habe versucht, <Menu opened={true}>...</Menu> zu verwenden, aber das Ergebnis war das gleiche.

Zum Beispiel wird dieser Code einen Snapshot erstellen, der foo nicht enthält.

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

Answer 1

Menu Komponente rendert nicht MenuOption s direkt Probleme zu überwinden, reagieren mit nativen z-index Handhabung. Zusätzlich muss es zuerst Dimensionen davon etc. erhalten. Es würde mehr Schritte erfordern, bis Sie sie in Ihrem Test gerendert haben.

Aber die Bibliothek selbst hat viele Tests und meiner Meinung nach sollte der Test nicht von der internen Handhabung der Bibliothek abhängen. Stattdessen sollten Sie es verspotten - 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(); 
}); 

Hinweis - Ihre Mocks und Ihre Importe sollten übereinstimmen! (Menu kann auf zwei Arten importiert werden).

Und dann erhalten Sie schöne Schnappschuss - siehe example snapshot