Skip to content

[Bug]: Unexpected behaviour of svelte's onMount when running component tests #35391

Open
@evanna90

Description

@evanna90

Version

1.51.1

Steps to reproduce

  1. Setup basic svelte project with experimental-ct-svelte, vite and typescript
    Svelte: 4.2.18
    @playwright/experimental-ct-svelte: 1.51.1
    vite: 5.4.15
    typescript: 5.7.2

  2. Add the following component:

// MyComponent.svelte
<script lang="ts">
  import { onMount } from "svelte";

  let initVal = 'initial';

  onMount(() => {
    initVal = 'mounted';
    console.log('initial value' + initVal);
  })
</script>

<div>{initVal} </div>
  1. Add test
test('test', async ({mount}) => {
    const component = await mount(MyComponent, {});
    await expect(component).toContainText('mounted');
})

Expected behavior

Test passes.
I should be able to see initial value mounted inside the console (while running npm run test-ct debug or inside the trace)

Actual behavior

Test fails, as initVal is still set to 'initial'
The console is empty.

Additional context

For some reason it looks like onMount is not even called in MyComponent. If it did, we should have at least seen the console.log.

To rule out the possibility that svelte update occurrs after playwright's expect is called, I tried two other solutions instead of using onMount on MyComponent:

//Solution 1

function setVal() { 
    initVal = 'mounted';
    console.log('initial value' + initVal);
  }

<div use:setVal>{initVal} </div>
// Solution 2

  $: {
    if (initVal === 'initial') { initVal = 'mounted'; console.log('initial value' + initVal); };
  }

Both of them seem to work fine - the test passes and console.log is displayed properly.
The test fails only when onMount is used, which seems like a very unexpected behavior.

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
    Memory: 2.78 GB / 11.77 GB
  Binaries:
    Node: 22.11.0
    npm: 10.9.0
  IDEs:
    VSCode: 1.86.1
  npmPackages:
    @playwright/experimental-ct-svelte: ^1.51.1 => 1.51.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions