TypeError: Attempted to assign to readonly property

[andyjessop]

Expected behaviour

Test:

import { expect, fixture, html } from '@open-wc/testing';

test('should be accessible', async () => {
  const el = await fixture(html`<button-1></button-1>`);
  await expect(el).to.be.accessible();
});

Component:

import { html, LitElement, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('button-1')
export class TestButton extends LitElement {
  render(): TemplateResult {
    return html`<button>test</button>`;
  }
}

I expect this should either pass or fail with a valid error.

Actual Behavior

I get this error:

27 |         this.DOCUMENT_POSITION_FOLLOWING = NodeDocumentPositionEnum.following;
28 |         this.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = NodeDocumentPositionEnum.implementationSpecific;
29 |         this.DOCUMENT_POSITION_PRECEDING = NodeDocumentPositionEnum.preceding;
30 |         this.ownerDocument = null;
31 |         this.parentNode = null;
32 |         this.isConnected = false;
             ^
TypeError: Attempted to assign to readonly property.
      at new Node (/Users/andy/dev/node_modules/happy-dom/lib/nodes/node/Node.js:32:9)
      at new CharacterData (/Users/andy/dev/node_modules/happy-dom/lib/nodes/character-data/CharacterData.js:20:9)
      at new Text (/Users/andy/dev//node_modules/happy-dom/lib/nodes/text/Text.js:10:9)
      at createTextNode (/Users/andy/dev//node_modules/happy-dom/lib/nodes/document/Document.js:733:16)
      at n (/Users/andy/dev/node_modules/axe-core/axe.min.js:12:47754)
      at /Users/andy/dev/node_modules/axe-core/axe.min.js:12:52348
      at /Users/andy/dev/node_modules/axe-core/axe.min.js:12:6155
      at i (/Users/andy/dev/node_modules/axe-core/axe.min.js:12:251644)
      at /Users/andy/dev/node_modules/axe-core/axe.min.js:12:468499
✗ should be accessible [33.63ms]

Additional context

Bun 1.0.18
Happy DOM ^12.10.3

[capricorn86]

Thank you for reporting @andyjessop! 🙂

It seems like your Typescript configuration is type checking the internals of Happy DOM which will cause problems like this.

How does your tsconfig look?

[andyjessop]

I believe this is a JavaScript TypeError, not a TS one. Our tsconfig us setup to exclude node_modules.

[capricorn86]

I'm not sure how to reproduce this. isConnected is a normal property in Javascript. This seem to happen in the constructor of the Node class when it is initializing the properties with their default values.

Perhaps Axe or some other library is overriding the prototype of the Node class?

[capricorn86]

I found this:
https://github.com/dequelabs/axe-core/blob/b753f95090d6d6028f46479ce2b375681ff2d17b/lib/core/imports/polyfills.js#L314

isConnected is not part of the prototype of the Node class, so it gets polyfilled by Axe. The property is initialized by setting this.isConnected to a value in the constructor instead.

This might be hard to fix in Happy DOM, but should probably be fixed.

[capricorn86]

@andyjessop the issue has been fixed now 🙂

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v13.1.0

[andyjessop]

Amazing, thank you!