Open wc test fails for simple litElement

Question

I have the following simple litelement: error.page.ts

@customElement('sandbox-error')
export class SandboxError extends LitElement {

  @property({type: Number})
  errorCode = 500

  @property({type: String})
  errorText = "An error occurred"

  render() {
    return html`
      <div>
        <main>
          <div>
            <p>${this.errorCode}</p>
            <h1>${this.errorText}</h1>
            <slot></slot>
          </div>
        </main>
      </div>

    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'sandbox-error': SandboxError
  }
}

And the following test:

import {SandboxError} from "../../src/components/error.page";
import {expect, fixture, html} from '@open-wc/testing';


describe("<sandbox-error>", () => {

  it('all attributes', async () => {
    const error:SandboxError = await fixture(html`<sandbox-error errorCode="404" errorText="foo">bar</sandbox-error>`);
    console.log(error.errorCode);
    expect(error.errorCode).to.equal(404);
  });

});

But the test (web-test-runner) fails

test/components/error.page.test.ts:

 ❌ <sandbox-error> > all attributes
      AssertionError: expected undefined to equal 404
        at n.<anonymous> (test/components/error.page.test.ts:9:31)

My guess is my configuration is somewhat wrong? The test (and test repo) can be found on Github.

Answer 1

It's fixed by changing the imports

import "../../src/components/error.page.js";
import {SandboxError} from "../../src/components/error.page.js";

Although I don't understand why this is even necessary.. it's a compiler thing from what I understand from this answer.