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

Question

I am using internal library component that uses React popper. Component is a dropdown that should open when i click on a marked element, as any other dropdown menu should.

I am trying to test with React testing library flow where user opens dropdown and does some interaction. But when i make my test open that dropdown it throws this error (warning):

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)
...

This is not a blocking error, it is a warning, and test actually passes, but it is annoying to see it all the time when i run my tests.

My question is, how can I make this warning text not show when i run my tests?

This is the test code:

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

After some browsing around, I found this interesting approach on GitHub to not allow this warning to show.

The idea is to mock popper.js and set placements value. You need to put this code above your test it or describe code block.

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

  return class {
    static placements = PopperJS.placements;

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

This does not fix the problem, it just masks it and prevents that warning to show in the terminal at all. It will not influence on a test and your test will be able to simulate click on a element in that dropdown menu.

CAUSE:
It seems that the problem lies in the fact that test is being run in a headless browser and there is no point of reference for Popper.js to position itself when the dropdown is opened.
With the above code, we give Popper default placement values him to run in headless environment.