@testing-library/dom window.getComputedStyle "Not implemented" error even after setting computedStyleSupportsPseudoElements: true

Question

I'm using jest to test a custom module that implements react embla carousel.

I received an error related to jsdom lacking an implementation for window.getComputedStyle(elt, pseudoElt)

Error: Not implemented: window.computedStyle(elt, pseudoElt)

After a bit of searching I found out that the second parameter wasn't supported by jsdom and the wonderful folks at @testing-library had an option to do... something... about it.

Reference

https://testing-library.com/docs/dom-testing-library/api-configuration#computedstylesupportspseudoelements

jest-setup.js:

import { configure } from '@testing-library/dom';
configure({
  computedStyleSupportsPseudoElements: true
})
import '@testing-library/jest-dom';

Unfortunately though, this doesn't seem to fix my error. I know the configuration is being applied because I set some other configuration options that broke all my tests.

Am I not applying something correctly or is there potentially another workaround? I don't need the full functionality of the carousel in the test I just want to make sure the data I pass to the view is being rendered properly.

Answer 1

I got the same error when updating Jest to the latest version (26.6.3). Calling getComputedStyle as a window property in the embla-carousel code was causing this issue for me:

const pseudoString = window.getComputedStyle(node, ':before').content

I also tried to solve this using the @testing-library/dom to no avail. But when I removed window and called getComputedStyle directly the issue went away:

const pseudoString = getComputedStyle(node, ':before').content

I've released embla-carousel v4.4.1 which includes a fix for this issue. Please install this version and the issue should go away.