[testing] axe-core 4.5.0+ logs preload warnings
When using the isAccessible matcher to validate a lit-html component, the console logs warnings about preload assets:
console.warn
Couldn't load preload assets: TypeError: Cannot read properties of null (reading 'href')
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184789
at Array.filter (<anonymous>)
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184765
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184852
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184856
at Array.forEach (<anonymous>)
at Object.Yi [as cssom] (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184326)
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186815
at Array.map (<anonymous>)
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186788
at new Promise (<anonymous>)
at tl (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186636)
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:366370
at c (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87202)
at Object.defer (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87497)
at wp.value (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:366352)
at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:369841
at c (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87202)
at Object.defer (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87497)
at Object.Cp [as _runRules] (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:369819)
at Object.<anonymous>.axe.run (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:376344)
at /Users/<my-username>/git/<my-repo-name>/node_modules/chai-a11y-axe/src/accessible.js:34:9
at new Promise (<anonymous>)
at /Users/<my-username>/git/<my-repo-name>/node_modules/chai-a11y-axe/src/accessible.js:32:10
at Generator.next (<anonymous>)
at fulfilled (/Users/<my-username>/git/<my-repo-name>/node_modules/tslib/tslib.js:115:62)
(I replaced some folder names, but you get the idea.)
Test code:
import { assert, fixture } from '@open-wc/testing';
import { CustomButton } from './button';
describe('Button unit tests', () => {
let element: Element;
beforeEach(async () => {
element = await fixture('<custom-button/>');
});
it('is accessible', async () => {
await assert.isAccessible(element);
});
});
Component code:
import { html, unsafeCSS, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import styles from './button.scss';
@customElement('custom-button')
export class CustomButton extends LitElement {
componentName = 'button';
static get styles() {
return unsafeCSS(styles);
}
@property({ type: Boolean })
disabled: boolean = false;
render() {
return html`<button class="my-custom-button" ?disabled=${this.disabled}>
<slot>Button text</slot>
</button>`;
}
}
If I set {preload: false} in the axe options passed in to axe.run() (in the chai-a11y-plugin's accessible.js file, line 34), the warnings disappear. As a workaround for now, I've forced our setup to install axe 4.4.3, since only axe-core 4.5.x causes this issue.
Could an option be added to the opts passed into isAccessible to set preload to false? Or better yet, is there a way we can set the options object that gets passed into axe.run()? Or...could you help me determine why it's giving the preload warnings?
Thanks for reporting and for the workarount - it saved me some time.
Encountering the same situation with axe-core 4.7.0