Tests with error "Cannot read properties of null (reading '__t')"

[mmamedel]

Describe the bug

Thank you for your amazing work with Svelte 5. We have migrated our repo, and we are now migrating our components. We are facing a challenge though with a specific scenario of our test files:

Reproduction

For instance, this Component works fine. But if I create a simple test for it (not even expecting anything), like:

import { mount, unmount } from 'svelte';
import Comp1 from './Component.svelte';

describe('ShortcutKeys', () => {
  it('Makes letters uppercase', () => {
    const component = mount(Comp1, { target: document.body, props: { obj: { derived: ['a', 'b'] } }});
    unmount(component);
  });
});

We get this error:

 FAIL  src/lib/shared/components/shortcutsWindow/ShortcutKeys.svelte.test.ts > ShortcutKeys > Makes letters uppercase
TypeError: Cannot read properties of null (reading '__t')

        in {expression}
        in Comp1.svelte

 ❯ src/lib/shared/components/shortcutsWindow/Comp1.svelte:46:69
     11|     <div>{key}</div>
     12|   {/each}
     13| </div>
       |       ^
     14| 
 ❯ src/lib/shared/components/shortcutsWindow/Comp1.svelte:46:25

Compiled code looks like this:

/* Compiled: /home/mlage/repos/tma-studio/apps/frontendV2/src/lib/shared/components/shortcutsWindow/Comp1.svelte */
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var root_2 = $.template(`<span>+</span>`);
var root_1 = $.template(`<!> <div> </div>`, 1);
var root = $.template(`<div></div>`);

export default function _unknown_($$anchor, $$props) {
	$.push($$props, true);

	const objDerived = $.derived(() => $$props.obj.derived);
	var div = root();

	$.each(div, 22, () => $.get(objDerived), (key) => key, ($$anchor, key, i) => {
		var fragment = root_1();
		var node = $.first_child(fragment);

		{
			var consequent = ($$anchor) => {
				var span = root_2();

				$.append($$anchor, span);
			};

			$.if(node, ($$render) => {
				if ($.get(i) > 0) $$render(consequent);
			});
		}

		var div_1 = $.sibling(node, 2);
		var text = $.child(div_1, true);

		$.reset(div_1);
		$.template_effect(() => $.set_text(text, key));
		$.append($$anchor, fragment);
	});

	$.reset(div);
	$.append($$anchor, div);
	$.pop();
}

And the problem seems to come from $.set_text(text, key) where text is null.
Interesting if we change the order of the if in the svelte component it works. So, Component.svelte like this:

<script>
  let { obj } = $props();
  const objDerived = $derived(obj.derived);
</script>

<div>
  {#each objDerived as key, i (key)}
    <div>{key}</div>
    <!-- Reversed order of each children -->
    {#if i > 0}
      <span>+</span>
    {/if}
  {/each}
</div>

Any suggestions?

Logs

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 8.31 GB / 15.51 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.local/share/pnpm/npm
    pnpm: 9.13.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    svelte: ^5.28.2 => 5.28.2

Severity

blocking an upgrade

[paoloricciuti]

I can't reproduce in a fresh svelte project...are you using vitest? Doesn't seem like since you are not importing describe and it

[mmamedel]

I will upload the sample to make it easier. Sorry that I didn’t think of that before.

[mmamedel]

Just found out what the problem was. In our repo we had happy-dom version 15.10.4 installed. After updating it to latest version 17.4.7, problem got resolved.