Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

getStylesheetsFromDocument crash on JSDOM: TypeError: Cannot read properties of undefined (reading 'mediaText') #3753

Closed
1 task done
AriPerkkio opened this issue Oct 28, 2022 · 0 comments · Fixed by #3754
Closed
1 task done

getStylesheetsFromDocument crash on JSDOM: TypeError: Cannot read properties of undefined (reading 'mediaText') #3753

AriPerkkio opened this issue Oct 28, 2022 · 0 comments · Fixed by #3754
Labels
ungroomed Ticket needs a maintainer to prioritize and label

Comments

@AriPerkkio
Copy link
Contributor

Product

axe-core

Product Version

4.5.0

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

I'm using axe-core in jsdom environment when testing UIs with jest-axe. When updating axe-core from 4.4.3 to 4.5.0 a new error started to show up in logs.

Actual

The getStylesheetsFromDocument function crashes when sheet.media.mediaText is run. The cssom package used by jsdom does not implement StyleSheet.media, NV/CSSOM#1.

axe-core/lib/core/utils/preload-cssom.js

Lines 182 to 193 in c1af750

/**
* Get stylesheets from `document`
* -> filter out stylesheet that are `media=print`
*
* @param {Object} rootNode `document`
* @returns {Array<Object>}
*/
function getStylesheetsFromDocument(rootNode) {
return Array.from(rootNode.styleSheets).filter(sheet =>
filterMediaIsPrint(sheet.media.mediaText)
);
}

How to Reproduce

Here is really minimal reproduction case with getStylesheetsFromDocument copied from axe-core to demonstrate the issue:

const JSDOM = require("jsdom").JSDOM;

const dom = new JSDOM(`
    <!DOCTYPE html>
    <head>
        <style>
            @media (max-width: 1px) { a { color: red; } }
        </style>
    </head>
    <body>
        <p>Hello world</p>
    </body>
`);

function getStylesheetsFromDocument(rootNode) {
    return Array.from(rootNode.styleSheets).filter(function (sheet) {
        return filterMediaIsPrint(sheet.media.mediaText);
    });
}

function filterMediaIsPrint() {}

getStylesheetsFromDocument(dom.window.document);
// ^^ Uncaught TypeError: Cannot read properties of undefined (reading 'mediaText')

Additional context

cssom is unmaintained and the linked issue is 12 years old. I know adding such work-arounds in axe-core's sources is not ideal, but as everything has been working nicely for many years, I hope this small fix could be applied.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
ungroomed Ticket needs a maintainer to prioritize and label
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: prevent crash on jsdom when preloading CSSOM AriPerkkio/axe-core
1 participant
@AriPerkkio