[Feature] component testing mount result

Can the update and the unmount functions be added? This is useful for Vue, React and Svelte:

test('update props', ({ mount }) => {
  const component = await mount(Component, {
    props: { name: 'test' }
  });
  await component.update({ props: { name: 'test2' }});
  await expect(component).toHaveText('test2');
})

test('display a pending changes conformation', ({ mount }) => {
  const component = await mount(Component);
  await component.unmount();
  await expect(component.locator('#conformation-dialog')).toBeVisible();
})

TODO

• update Svelte
• update Solid
• update React
• update Vue
• update Vue2
• unmount Svelte
• unmount Solid
• unmount React
• unmount Vue
• unmount Vue2

[pavelfeldman]

We now have feature requests for the following functions and i think a few more will follow. Assuming it will be a breaking change, why not release it sooner rather than later?

We have until v1.25 branch point to make this decision. I agree with your points, we can put those calls on the Locator subclass. The unfortunate bit is that they might end up being different for each framework, but I guess we can live with it. Do you want to send a patch that does it?

[sand4rt]

Have you taken into account that the update will not automatically be type safe as well if i follow the current implementation of unmount?

test('work', ({ mount, update }) => {
  const component = mount<Props>(Component, { 
    props: { title: 'test' }
  })
  
  update<Props>(component, { props: { title: 'test' }}) // Must specifically specify the type here
})

instead of

test('work', ({ mount }) => {
  const component = mount<Props>(Component, { 
    props: { title: 'test' }
  })
  
  component.update({ props: { title: 'test' }}) // Reuse of the same type defined in mount<Props>()
})

In addition, Testing Library, Vue Test Utils and partially Cypress component testing are using the same API. If you decide to use the same API as well, context switching and the migration to Playwright will becomes easier.

We now have feature requests for the following functions and i think a few more will follow. Assuming it will be a breaking change, why not release it sooner rather than later?

component.unmount()
component.update()
component.emitted() // if feature request gets accepted

Arguably, but a minor inconvenience is that you will have some line breaks if we have many function props, making the code more verbose in some situtations…

test('some test description', ({ 
  page,
  mount,
  update,
  unmount
}) => {
   // arrange, act, expect
})

Maybe i’m nitpicking here, but would like to know what you think.