Unintended error "PrettyFormatPluginError"

[shamokit]

repository

https://github.com/shamokit/svelte-vitest-happydom-PrettyFormatPluginError

packages

"@testing-library/jest-dom": "^6.4.2",
"@testing-library/svelte": "^4.1.0",
"happy-dom": "^14.3.1",
"svelte": "^4.2.7",
"vitest": "^1.4.0"

about

When a test fails, "PrettyFormatPluginError" may appear instead of "TestingLibraryElementError" that should appear.

I would be happy if TestingLibraryElementError would be returned.

code

Buttons.svelte

<script lang="ts">
  export let name: string | undefined = undefined;
  export let count: number = 0;
</script>

<button type="button">{name}</button>
<button type="button">{count}</button>

Buttons.test.ts

import { render, screen } from '@testing-library/svelte';
import { expect, test, describe } from 'vitest';
import Buttons from './Buttons.svelte';

describe('Buttons.svelte', async () => {
  test('two buttons', async () => {
    render(Buttons, {
      name: 'Svelte',
      count: 2,
    });

    const button = screen.getByRole('button', { name: 'Svelte' });
    expect(button).toBeInTheDocument();

    // PrettyFormatPluginError occurs when I write a test that intentionally fails.
    const changedButton = screen.getByRole('button', { name: 'zzzz' });
    expect(changedButton).toBeInTheDocument();
  });
});

changedButton does not exist.
At this time, a "TestingLibraryElementError" error should be returned, but if there is an element that depends on another export let in the component, a "PrettyFormatPluginError" will be returned.

example

<button type="button">{name}</button>
<button type="button">2</button> // not {count}

or

<button type="button">{name}</button>

→　TestingLibraryElementError（OK）

<button type="button">{name}</button>
<button type="button">{count}</button>

→　PrettyFormatPluginError（NG）

[mcous]

Thanks for your report @shamokit, this is a really interesting bug. It's caused by a couple of "bugs", one in Svelte itself and one in Happy DOM

• Svelte bug: non-string data is passed to document.createTextNode
  • This bug is no longer appears to be present in Svelte v5
• Happy DOM bug: data passed to document.createTextNode is not coerced into a string
  • Browsers and JSDOM appear to coerce node.data into a string
  • I can't tell if this coercion is specified in the DOM spec; it may not be

I think the best path forward would probably be an issue filed with Happy DOM - I doubt Svelte v4 is getting any real attention at this point, and this bug appears fixed in v5. There's unfortunately nothing we can do about this issue in this library

[shamokit]

@mcous Thank you for your reply!

I will wait for the release of Svelte5.
Thank you very much for your time👍

[mcous]

@shamokit the latest version of happy-dom resolves the issue that seemed to be the cause. I think you should no longer see this error

[shamokit]

@mcous I confirmed that it has been fixed.
Thank you for contacting us!

[mcous]

@yanick we can close this one out, fixed upstream

[yanick]

Upstream fixes are the best fixes. ❤️