[Dropdown Menu] Problems when testing with Jest+RTL

Hello!

We’re trying to test a wrapper we made around the Dropdown Menu component but we found out that it’s not rendering when the trigger is clicked. This only happens in the tests, the UI works like a charm.

We thought it could be related to the portal, so we used portalled={false} and got the same results.

I tried to create a reproduction on codesandbox but now I’m getting a different error, which makes me think that maybe we have ResizeObserver mocked, I’ll have to take a look.

Failed to execute ‘observe’ on ‘ResizeObserver’: parameter 1 is not of type ‘Element’.

Here is the codesandbox reproducing the error.

[benoitgrelard]

Hey @rubenmoya,

Thanks for reaching out. I believe this is an issue with the test environment (jest/jsdom) not having ResizeObserver. That’s why you don’t see an issue in your app. The test environment is not a real browser/DOM so you don’t necessarily have all the APIs available.

I believe what you’d have to do is mock these bits within your testing environment of choice.

We’re currently in alpha so we don’t have tests for all packages yet, but eventually you should be able to take a look at how we did it ourselves for the same purpose.

In the meantime, I’ve had a very quick go in our codebase with the same test you were trying to run, and I’ve had to mock a couple pieces for it to work:

global.ResizeObserver = class ResizeObserver {
  constructor(cb) {
    this.cb = cb;
  }
  observe() {
    this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);
  }
  unobserve() {}
};

global.DOMRect = {
  fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }),
};

I hope that helps, if so, feel free to close the issue if this is satisfactory.

[dkapanidis]

@benoitgrelard , this also worked for me on #1036 🤘 Thank you!

However, I have an extra issue created by the fact that I’m using TypeScript and it doesn’t appear to be very fond of the solution. I’m battling with it and will leave a solution here (if I find one) 😄

For anyone looking to a typescript format of the same solution:

(global as any).ResizeObserver = class ResizeObserver {
  constructor(cb: any) {
    (this as any).cb = cb;
  }

  observe() {
    (this as any).cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);
  }
  
  unobserve() { }
};

(global as any).DOMRect = {
  fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }),
};