Not implemented: window.computedStyle(elt, pseudoElt)

See original GitHub issue

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”

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

53reactions
GriffinSaucecommented, Jan 12, 2021

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 😅

9reactions
nickytonlinecommented, Nov 26, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Not implemented: window.computedStyle(elt, pseudoElt) #147
I am getting the following error for the following test with jest-axe: Am I missing something? Error: Not implemented: window.
Read more >
Not implemeted window errors in react-testing-library
The tests are all passing but I get a large amount of errors from jsdom logged to the console: Error: Not implemented: window.computedStyle(elt, ......
Read more >
Not implemented: window.computedStyle(elt, pseudoElt)
Coming soon: A brand new website interface for an even better experience!
Read more >
jest: debugging 'not implemented' errors - code-comments
I recently added a feature to an app that scrolls the user to the top of page on navigation. Unfortunately, this started spewing...
Read more >
Window.getComputedStyle() - Web APIs | MDN
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found