如何使用菜单测试组件

Question

我正在尝试使用 Jest 的快照测试包含菜单的组件。问题是菜单的内容没有呈现，所以我无法测试整个组件。

有没有办法强制菜单呈现其所有 MenuOption？我尝试使用 <Menu opened={true}>...</Menu> 但结果是一样的。

例如，此代码将生成不包含 foo.

的快照

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

Answer 1

Menu 组件不会直接渲染 MenuOptions 以克服 react-native z-index 处理的问题。此外，它首先需要获取它的尺寸等。在测试中渲染它们之前需要更多步骤。

但是库本身有很多测试，在我看来你的测试不应该依赖于库的内部处理。相反，您应该嘲笑它 - 例如

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

如何使用菜单测试组件

How to test components with menu

jestjs

react-native

react-native-popup-menu