0

我正在使用使用React popper的内部库组件。组件是一个下拉菜单，当我单击标记的元素时应该打开它，就像任何其他下拉菜单一样。

我正在尝试使用用户打开下拉列表并进行一些交互的 React 测试库流程进行测试。但是当我让我的测试打开那个下拉列表时，它会抛出这个错误（警告）：

Warning: `NaN` is an invalid value for the `left` css style property.
 at div
        at Popover__MenuArrow (/my-project/node_modules/styled-components/src/models/Keyframes.js:20:51)
        at WithTheme(Component) (/my-project/node_modules/styled-components/src/models/ServerStyleSheet.js:66:13)
        at div
        at Popover__DropdownContainer (/my-project/node_modules/styled-components/src/models/Keyframes.js:20:51)
        at WithTheme(Component) (/my-project/node_modules/styled-components/src/models/ServerStyleSheet.js:66:13)
...

这不是阻塞错误，而是警告，并且测试实际上通过了，但是当我运行测试时总是看到它很烦人。

我的问题是，如何在运行测试时不显示此警告文本？

这是测试代码：

it('Should open dropdown menu', () => {
  const { getByTestId } = render(<DropdownMenu />);

  // Click on dropdown and open it
  const dropdownButton = getByTestId('my-dropdown-menu');
  fireEvent.click(dropdownButton);

  // Assert if dropdown list is visible
  const dropdownList = getByTestId('my-dropdown-list');
  expect(dropdownList).toBeTruthy();
});
4

1 回答 1

0

经过一番浏览，我在 GitHub 上发现了这种有趣的方法，不允许显示此警告。

这个想法是模拟popper.js和设置展示位置值。您需要将此代码放在您的测试it或describe代码块之上。

jest.mock('popper.js', () => {
  const PopperJS = jest.requireActual('popper.js');

  return class {
    static placements = PopperJS.placements;

    constructor() {
      return {
        destroy: () => {},
        scheduleUpdate: () => {},
      };
    }
  };
});

这并不能解决问题，它只是掩盖它并完全阻止该警告显示在终端中。它不会影响测试，您的测试将能够模拟单击该下拉菜单中的元素。

原因：
似乎问题在于测试是在无头浏览器中运行的，并且在打开下拉列表时，Popper.js 没有参考点来定位自身。
使用上面的代码，我们给 Popper 默认放置值，让他在无头环境中运行。

于 2021-11-29T15:41:46.323 回答