1

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

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

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

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

1 回答 1

2

Menu组件不MenuOption直接渲染 s 来克服 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可以通过两种方式导入）。

然后你会得到漂亮的快照 - 请参阅示例快照

于 2017-06-06T21:45:27.130 回答