React 测试库测试错误“NaN”是“left”css 样式属性的无效值答案

【问题标题】：React Testing library testing error `NaN` is an invalid value for the `left` css style propertyReact 测试库测试错误“NaN”是“left”css 样式属性的无效值
【发布时间】：2021-11-29 15:41:46
【问题描述】：

我正在使用使用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();
});

【问题讨论】：

标签： reactjs jestjs react-testing-library react-popper

【解决方案1】：

经过一番浏览，我发现这个interesting approach on 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 默认的放置值，让他在无头环境中运行。

【讨论】：