Comments (9)
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 😅
from jest-axe.
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.
from jest-axe.
Ok the 'proper' way to solve this is to turn off the color contrast checks in axe-core which'll never work in a JS Dom environment because visual checks cannot exist.
So I'm doing a patch but you can fix this yourself creating an instance with it turned off by default.
https://github.com/NickColley/jest-axe#setting-global-configuration
// Global helper file (axe-helper.js)
const { configureAxe } = require("jest-axe");
const axe = configureAxe({
checks: [
{
// color contrast checking doesnt work in a jsdom environment.
id: "color-contrast",
enabled: false,
},
],
});
module.exports = axe
from jest-axe.
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/[email protected]/node_modules/jest-environment-jsdom/build/index.js:70:23)
at module.exports (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
at Window.getComputedStyle (node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at Window.getComputedStyle (/Users/huangjihua/github/ts-dom-to-image/node_modules/.pnpm/[email protected]/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'
from jest-axe.
@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)
from jest-axe.
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.
from jest-axe.
Going to patch this in jest-axe itself, I think the main result is that any jest tests against pseudo elements may succeed, but that's better than people having to patch this manually themselves.
from jest-axe.
Ok the 'proper' way to solve this is to turn off the color contrast checks in axe-core which'll never work in a JS Dom environment because visual checks cannot exist.
So I'm doing a patch but you can fix this yourself creating an instance with it turned off by default.
https://github.com/NickColley/jest-axe#setting-global-configuration
// Global helper file (axe-helper.js) const { configureAxe } = require("jest-axe"); const axe = configureAxe({ checks: [ { // color contrast checking doesnt work in a jsdom environment. id: "color-contrast", enabled: false, }, ], }); module.exports = axe
The interface has changed since this post was made. Your setup file should contain something like:
const axe = configureAxe({
globalOptions: {
checks: [
{
id: 'color-contrast',
enabled: false,
},
],
},
});
export default axe;
from jest-axe.
Colour contrast checks are turned off by default for any users with up to date version of the package, there's no need to do this manually I was sharing this for people who had not updated yet.
from jest-axe.
Related Issues (20)
- impactLevels does not exist in type 'JextAxeConfigureOptions' HOT 5
- TypeError: axe.run arguments are invalid HOT 1
- nextjs app and jest-axe
- Bump axe-core to version to v4.5.1 HOT 1
- Color contrast test not working? HOT 3
- "Axe is already running" warnings when using `it.each` HOT 8
- On updating to v7, our "closable Tab" fails due to not allowing interactive elements as siblings/descendants of a tab HOT 1
- Expose just 'toHaveNoViolations' on its own? HOT 3
- Doesn't seem to work with fake timers HOT 1
- Possible typo in the README HOT 1
- Issue when testing a webcomponent customelement from a design system HOT 1
- Specify rules for specific selectors HOT 4
- Update axe-core to latest HOT 5
- Questions About the Use of jest-axe HOT 3
- False positive: div in definition-list HOT 1
- [Feature Request] Add ability to specify metadata when adding customized checks & rules HOT 2
- `aria-hidden-focus` rule it is not showing an error HOT 1
- How can this be used with jest-dom version 6? HOT 1
- Question: What is the difference between cypress-axe and jest-axe? HOT 1
- update axe-core to 4.9.1 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jest-axe.