Not implemented: window.computedStyle(elt, pseudoElt)

[mehmetnyarar]

I am getting the following error for the following test with jest-axe:

Am I missing something?

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

test/setup.ts:

import '@testing-library/jest-dom/extend-expect'
import 'jest-axe/extend-expect'

file.spec.tsx:

const a11y = await axe(container)
expect(a11y).toHaveNoViolations()

jest.config.js

{
  displayName: 'web:test',
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  testMatch: ['**/__tests__/**/+(*.)+(spec|test).+(js|ts)?(x)'],
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1',
    '^test/(.*)$': '<rootDir>/test/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: {
        jsx: 'react'
      }
    }
  }
}

deps:

"jest": "^26.6.3",
"jest-axe": "^4.1.0",
"react-test-renderer": "^17.0.1",
"ts-jest": "^26.4.4",
"typescript": "^4.1.2"

[nickytonline]

I am experiencing this as well. For now, I've added the following to my tests where this fails. It's a noop patch for now.

Happy to dig into this @NickColley if you're super busy.

describe('Some tests', () => {
  beforeAll(() => {
    // JSDom does not implement this and an error was being
    // thrown from jest-axe because of it.
    window.getComputedStyle = () => {};
  });

  // my tests ...
})

Also, here's the full stack trace of this error:

  console.error
    Error: Not implemented: window.computedStyle(elt, pseudoElt)
        at module.exports (/Users/johndoe/dev/forem/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at Window.getComputedStyle (/Users/johndoe/dev/forem/node_modules/jsdom/lib/jsdom/browser/Window.js:657:7)
        at hasPsuedoElement2 (/Users/johndoe/dev/forem/node_modules/axe-core/axe.js:16285:26)
        at /Users/johndoe/dev/forem/node_modules/axe-core/axe.js:2253:30
        at Object.colorContrastEvaluate (/Users/johndoe/dev/forem/node_modules/axe-core/axe.js:16331:13)
        at Check.Object.<anonymous>.Check.run (/Users/johndoe/dev/forem/node_modules/axe-core/axe.js:18562:34)
        at /Users/johndoe/dev/forem/node_modules/axe-core/axe.js:18698:18
        at pop (/Users/johndoe/dev/forem/node_modules/axe-core/axe.js:6198:18)
        at Object.defer (/Users/johndoe/dev/forem/node_modules/axe-core/axe.js:6220:11)
        at /Users/johndoe/dev/forem/node_modules/axe-core/axe.js:18697:20 undefined

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:657:7)
      at hasPsuedoElement2 (node_modules/axe-core/axe.js:16285:26)
      at node_modules/axe-core/axe.js:2253:30
      at Object.colorContrastEvaluate (node_modules/axe-core/axe.js:16331:13)

It seems that this might be a jsdom issue though and not a jest-axe issue.

[GriffinSauce]

This workaround appears to break functionality in jest-axe, my simple check with a missing <select> label will return green when window.getComputedStyle is just replaced with a noop.

As an alternative I've only stripped the second (unsupported) parameter and this at least keeps that test functional:

const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);

You can add this in a testSetup file to apply to all tests instead of using a local beforeAll. That said: I expect that this will still introduce inaccuracy in tests, that second param must be there for a reason.

This issue in the jest-dom repo got a bit heated but the conclusion seems to be that it should not be fixed be fixed there... so does this belong with React Testing Library?

It appears to be fixed in dom-testing-library and subsequently react-testing-library but I'm still getting it in newer versions of RTL.

So my conclusion is: I don't know where to go with this 😅

[zlargon]

@GriffinSauce's solution works for me.

I get the same error message after I upgrade the react-scripts from 3.x to 4.0.3 (without jest-axe)

[NickColley]

Think this must be an issue upstream with axe-core itself since jest-axe just is a small wrapper, I'm also not sure where best to fix this.

Let me know if there's anything specific we can change in this package to resolve this issue if I'm incorrect.

Will close this for now but will be available for people to find when googling for the great workarounds posted to help others thank you.

[huangjihua]

      297 |      */
      298 |     function nodePseudoStyle(pseudoName) {
    > 299 |         const style = window.getComputedStyle(original, pseudoName);
          |                              ^
      300 |         const content = style.getPropertyValue('content');
      301 |         if (content === '' || content === 'none')
      302 |             return;

      at VirtualConsole.<anonymous> (node_modules/.pnpm/jest-environment-jsdom@29.0.3/node_modules/jest-environment-jsdom/build/index.js:70:23)
      at module.exports (node_modules/.pnpm/jsdom@20.0.0/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at Window.getComputedStyle (node_modules/.pnpm/jsdom@20.0.0/node_modules/jsdom/lib/jsdom/browser/Window.js:798:7)
      at nodePseudoStyle (dist/es/dom-to-image.js:299:30)
      at dist/es/dom-to-image.js:292:76
          at Array.forEach (<anonymous>)
      at eachPseudoStyles (dist/es/dom-to-image.js:292:58)

  console.error
    Error: Not implemented: window.computedStyle(elt, pseudoElt)
        at module.exports (/Users/huangjihua/github/ts-dom-to-image/node_modules/.pnpm/jsdom@20.0.0/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at Window.getComputedStyle (/Users/huangjihua/github/ts-dom-to-image/node_modules/.pnpm/jsdom@20.0.0/node_modules/jsdom/lib/jsdom/browser/Window.js:798:7)
        at nodePseudoStyle (/Users/huangjihua/github/ts-dom-to-image/dist/es/dom-to-image.js:299:30)
        at /Users/huangjihua/github/ts-dom-to-image/dist/es/dom-to-image.js:292:76
        at Array.forEach (<anonymous>)
        at eachPseudoStyles (/Users/huangjihua/github/ts-dom-to-image/dist/es/dom-to-image.js:292:58)
        at processTicksAndRejections (node:internal/process/task_queues:96:5) {
      type: 'not implemented'