fix: stricter props types by alecgibson · Pull Request #2137 · vuejs/test-utils

alecgibson · 2023-07-25T10:58:28Z

At the moment, mount() offers strong typing of props, but this strong typing is lost when dealing with the VueWrapper through either the props() or setProps() methods.

This change strengthens the typing of these methods to help raise compile-time errors when trying to get or set incorrect props.

netlify · 2023-07-25T10:58:35Z

✅ Deploy Preview for vue-test-utils-docs ready!

Name	Link
🔨 Latest commit	`dac5950`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-test-utils-docs/deploys/6523da9562733c0008d0ccaf
😎 Deploy Preview	https://deploy-preview-2137--vue-test-utils-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

alecgibson · 2023-07-25T11:12:00Z

tests/props.spec.ts


    it('should get props from functional component', async () => {
-      const wrapper = mount(Title, {
+      const wrapper: VueWrapper<any> = mount(Title, {


I had to add this to make the compilation pass; I'm not sure I understand why this isn't working properly with the functional component? Feels like this is an issue with functional component types rather than my change, right...?

I'm not sure.

@johnsoncodehk Would you mind taking a look at this PR please? Is this the proper way to type props?

If we add something that requires users to add code to their code base (like this) I think this would be a breaking change, which I'm not sure we'd want to do.

Not sure if Johnson will have time to 👀 , we may need to have a look. Vue types are too complex 😓

Okay have applied @pikax 's suggestion and the build is green without this cast

cexbrayat

I think we need @johnsoncodehk insight

cexbrayat · 2023-08-17T15:12:47Z

tests/props.spec.ts


    it('should get props from functional component', async () => {
-      const wrapper = mount(Title, {
+      const wrapper: VueWrapper<any> = mount(Title, {


I'm not sure.

@johnsoncodehk Would you mind taking a look at this PR please? Is this the proper way to type props?

lmiller1990 · 2023-08-31T10:18:49Z

We may need to just find some wild code bases to validate if this breaks anything. Maybe GitLab (not sure if they are on Vue 3 yet) or Cypress (cypress/vue uses Test Utils)

pikax · 2023-10-07T07:08:10Z

@alecgibson if you change the mount to:

export function mount<
  T,
  C = T extends ((...args: any) => any) | (new (...args: any) => any)
    ? T
    : T extends { props?: infer Props }
    ? DefineComponent<
        Props extends Readonly<(infer PropNames)[]> | (infer PropNames)[]
          ? { [key in PropNames extends string ? PropNames : string]?: any }
          : Props
      >
    : DefineComponent
>(
  originalComponent: T,
  options?: ComponentMountingOptions<C>
): VueWrapper<
  ComponentProps<C> & ComponentData<C> & ComponentExposed<C>,
  ComponentPublicInstance<
    ComponentProps<C>,
    ComponentData<C> & ComponentExposed<C>
  >
>

it should work without needing to cast on functional components

const wrapper: VueWrapper<any> = mount(Title, {

At the moment, `mount()` offers [strong typing][1] of props, but this strong typing is lost when dealing with the `VueWrapper` through either the `props()` or `setProps()` methods. This change strengthens the typing of these methods to help raise compile-time errors when trying to get or set incorrect props. [1]: https://github.com/vuejs/test-utils/blob/11b34745e8e66fc747881dfb1ce94cef537c455e/src/types.ts#L44

cexbrayat

LGTM 👍

johnsoncodehk · 2023-10-17T16:01:53Z

LGTM 👍 (Sorry for the delay!)

DanielleHuisman · 2023-11-28T10:17:17Z

This PR (released in 2.4.2) breaks existing TypeScript projects, because setProps is too strict. I see this has already been addressed in e9fe51f by making it Partial. When can we expect this fix to be released?

cexbrayat · 2023-11-28T10:20:18Z

@DanielleHuisman We're waiting on another PR to land that should improve typings from @pikax #2242
In the meantime, you can use v2.4.1

alecgibson force-pushed the props-types branch 2 times, most recently from db15b9d to 4c055cd Compare July 25, 2023 11:11

alecgibson commented Jul 25, 2023

View reviewed changes

alecgibson force-pushed the props-types branch from 4c055cd to 1ede858 Compare July 25, 2023 11:12

cexbrayat reviewed Aug 17, 2023

View reviewed changes

cexbrayat requested a review from johnsoncodehk August 17, 2023 15:13

alecgibson force-pushed the props-types branch from 1ede858 to dac5950 Compare October 9, 2023 10:48

cexbrayat approved these changes Oct 9, 2023

View reviewed changes

johnsoncodehk approved these changes Oct 17, 2023

View reviewed changes

cexbrayat merged commit 1db42c8 into vuejs:main Oct 17, 2023

DesselBane mentioned this pull request Nov 23, 2023

Bug: Optional props are typed as | undefined #2256

Open

alecgibson deleted the props-types branch November 28, 2023 10:23

renovate bot mentioned this pull request Feb 27, 2025

chore(deps): update all non-major dependencies posva/vue-ts-lib#207

Open

1 task

Conversation

alecgibson commented Jul 25, 2023

Uh oh!

netlify bot commented Jul 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vue-test-utils-docs ready!

Uh oh!

alecgibson Jul 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cexbrayat Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

lmiller1990 Aug 20, 2023

Choose a reason for hiding this comment

Uh oh!

alecgibson Oct 9, 2023

Choose a reason for hiding this comment

Uh oh!

cexbrayat left a comment

Choose a reason for hiding this comment

Uh oh!

cexbrayat Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

lmiller1990 commented Aug 31, 2023

Uh oh!

pikax commented Oct 7, 2023

Uh oh!

cexbrayat left a comment

Choose a reason for hiding this comment

Uh oh!

johnsoncodehk commented Oct 17, 2023

Uh oh!

DanielleHuisman commented Nov 28, 2023

Uh oh!

cexbrayat commented Nov 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

netlify bot commented Jul 25, 2023 •

edited

Loading

alecgibson Jul 25, 2023 •

edited

Loading