Jest testing

[zZHorizonZz]

Description

I'm proposing to add potentially better support for testing with Jest, if possible, or add a section to the official documentation about testing. Currently, I was able to make Jest work with Material Web Components in Next.js, but there's a lot of configuration involved just to get it to function. In particular, there seem to be two methods used: matchMedia and attachInternals. I was able to find a workaround for matchMedia, which seems more likely to be a problem with Jest itself (https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom). However, there's also the attachInternals method, which requires creating a prototype. I found a solution that works, but as the author suggests, I don't think this is the correct way to implement it (https://stackoverflow.com/questions/77512630/what-is-the-correct-way-to-test-a-next-js-react-app-that-uses-the-latest-version).

[djpetti]

I had the same problem, but I also had to fix HTMLElement.animate() which jsdom apparently doesn't support. I put the following in a file that I added to setupFilesAfterEnv in my Jest config:

Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});
global.HTMLElement.prototype.attachInternals = () => ({
  setFormValue: () => {},
  setValidity: () => {},
});
global.HTMLElement.prototype.animate = () => {};

Tests now pass without errors.