[Bug]: when i mount Vue3 Component use JSX，then use component.update function to update props is not working; but do not use JSX is working;

[binghao-guan]

Version

1.45.3

Steps to reproduce

<template>
  <select id="" v-model="model" name="">
    <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label || option.value }}</option>
  </select>
</template>
<script setup>
  const model = defineModel();
  const props = defineProps(['options']);
</script>

import { expect, test } from '@playwright/experimental-ct-vue';
import { ref } from 'vue';

import SelectBasic from '../src/basic.vue';

const options = ref([
  {
    value: '选项1',
    label: '选项01',
  },
  {
    value: '选项2',
    label: '选项02',
  },
  {
    value: '选项3',
    label: '选项03',
  },
  {
    value: '选项4',
    label: '选项04',
  },
  {
    value: '选项5',
    label: '选项05',
  },
]);
test.describe.configure({
  timeout: 5000,
});
test.describe('<Select> Props', () => {
  test('modelValue: default value', async ({ mount }) => {
    const modelValue = ref('选项2');
    // when i mount component use this, update is not working
    const component = await mount(<SelectBasic options={options.value} modelValue={modelValue.value} />);
    // when i mount use this, update is working
    // const component = await mount(SelectBasic, {
    //   props: {
    //     modelValue: modelValue.value,
    //     options: options.value,
    //   },
    // });
    
    await expect(component).toHaveValue('选项2');
    await component.update({
      props: {
        modelValue: '选项4',
      },
    });
    await expect(component).toHaveValue('选项4');
  });
});

Expected behavior

when i use jsx, update function update props, component should be rerender;

Actual behavior

component not rerender

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.22621
    CPU: (20) ia32 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 10.22 GB / 31.71 GB
  Binaries:
    Node: 18.18.2 - C:\Program Files (x86)\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files (x86)\nodejs\npm.CMD
    pnpm: 8.7.5 - ~\AppData\Roaming\npm\pnpm.CMD
  Languages:
    Bash: 5.2.26 - C:\Program Files\Git\usr\bin\bash.EXE
  npmPackages:
    @playwright/experimental-ct-vue: 1.45.3 => 1.45.3
    playwright: 1.45.3 => 1.45.3

[sand4rt]

Hi @binghao-guan, using a ref as a prop is not supported inside test files, which might be causing the issue. Could you also try using the JSX syntax?: await component.update(<SelectBasic modelValue="选项4" />). If that doesn't work, you might need to use a wrapper/story component. For more details, see https://playwright.dev/docs/test-components#test-stories.

The following things could be improvement here:

• Providing a more descriptive error message when the props are not serializable.
• Adjusting the mount type so that when a JSX element is passed, component.update only accepts a JSX element.
• Adding a Vue + JSX API reference: https://playwright.dev/docs/test-components#api-reference

[binghao-guan]

Hi@sand4rt, thanks for reply. I'm try do not using ref, It's not work. Then i use JSX Syntax: await component.update(<SelectBasic modelValue="选项4" />)，it's work.

[sand4rt]

Glad it works now!

@mxschmitt what do you think of the suggested improvements above?

[k983551019]

const selectRef = ref()
const component = await mount(<SelectBasic ref={selectRef} options={options.value} modelValue={modelValue.value} />);

Is selectRef useful?