React Testing 库测试错误 `NaN` is an invalid value for the `left` css style 属性

Question

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

Answer 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 默认放置值设为运行。

React Testing 库测试错误 `NaN` is an invalid value for the `left` css style 属性

React Testing library testing error `NaN` is an invalid value for the `left` css style property

reactjs

jestjs

react-testing-library

react-popper