Support for Vue 3 #176

afontcu · 2020-11-20T23:10:23Z

I'll use this issue to keep track of all efforts to support Vue 3 in the next major version of Vue Testing Library.

All feedback is appreciated! 🚀

Support for Vue 3 is released in next channel:

https://github.com/testing-library/vue-testing-library/tree/next

Install it by running npm install --save-dev @testing-library/vue@next.

To do:

Update types: feat: Add types for Vue 3 #180
Add suport/example for vue-apollo: docs: Add example for Apollo GraphQL + composition API #192
Handle Vue Router: feat: Reenable Vue Router for Vue 3 #191
...properly: VTL for Vue 3: The routes option does not work correctly #195. RFC: [RFC] Remove custom router/vuex management for Vue 3 #205
Rethink rerender/setProps: Vue 3: about rerender api design #198 (for now, it stays as it is, because it matches Testing Library ecosystem expectations).
Find a way to test async components Vue 3: Async component with suspense wrapper #230

BREAKING CHANGES

Snapshots are potentially different due to whitespaces.
Callback function (third parameter of render) is now gone. It is replaced with global config options (for example, global.directives). Check all available options in VTU docs. This includes plugins and slots, too.
isUnmounted is gone.
updateProps is now called rerender to align with other Testing Lib libraries. For the time being is just an alias to Vue Test Utils' setProps, but we might want to explore further options to actually rerender the component. This is further discussed in Vue 3: about rerender api design #198.

Other breaking changes that are not directly related to Vue 3:

removed support for node 10.

Please notice that releases on next branch will remain on the range of 6.x.x, even if they introduce breaking changes.

The text was updated successfully, but these errors were encountered:

savannahp · 2021-02-10T15:42:08Z

When I install this, it says"
Vue packages version mismatch:

- vue@3.0.5 (C:\Users\xxxx\projects\xxx\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\Users\xxxx\projects\xxxx\node_modules\vue-template-compiler\package.json)

It does this every time and I've tried about 5 different ways for this library. @afontcu

afontcu · 2021-02-10T16:05:42Z

Hi!

Looks like you are installing vue-template-compiler and not @vue/compiler-sfc

See the peerDeps here: https://github.com/testing-library/vue-testing-library/blob/next/package.json#L84-L87

savannahp · 2021-02-10T16:16:03Z

@afontcu The testing library says that vue-template-compiler is a required peer dependency. If I uninstall it, it says that its missing and is needed. I already have @vue/compiler-sfc 3.0.5

afontcu · 2021-02-10T16:19:23Z

Are you installing @testing-library/vue@next? vue-template-compiler is not required there

savannahp · 2021-02-10T16:22:58Z

@afontcu yes I am!

afontcu · 2021-02-10T16:24:23Z

Can you share a reproduction link then please? As pointed in link above, next version (it should install 6.X.X) is not requiring vue-template-compiler as a peerDep, so something else should be going on.

savannahp · 2021-02-10T16:39:45Z

I see, here is my link @afontcu https://gist.github.com/savannahp/3ac3e009077a174764b6e9fea096b65a

savannahp · 2021-02-10T20:29:48Z

Another tid bit, I have it running now after I updated Vue Jest. The router examples, don't work with the Vue 3 recommended vue router version ^4.0.3, I noticed you guys are on the older one which doesn't work with Vue 3 either. It will most likely give you a TypeError: removeHistoryListener is not a function

afontcu · 2021-02-11T08:18:42Z

The router examples, don't work with the Vue 3 recommended vue router version ^4.0.3, I noticed you guys are on the older one which doesn't work with Vue 3 either. It will most likely give you a TypeError: removeHistoryListener is not a function

Hm, just ran the test suite with Router 4.0.3 and everything seems to work fine (on next branch) 🤔

gmlewis · 2021-02-23T17:55:12Z

I'm running into the same issue with Vue3 and vue-router@4.0.3 but if I change line 2649 of node_modules/vue-router/dist/vue-router.cjs.js from:

let removeHistoryListener;

to:

    let removeHistoryListener = () => { };

then the problem goes away.

ITenthusiasm · 2021-02-24T12:05:34Z

A heads up: The VTU docs link is broken here too. 😅

scambier · 2021-02-25T09:16:14Z

When I install this, it says"
Vue packages version mismatch:
- vue@3.0.5 (C:\Users\xxxx\projects\xxx\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\Users\xxxx\projects\xxxx\node_modules\vue-template-compiler\package.json)
It does this every time and I've tried about 5 different ways for this library. @afontcu

For people who come here after way too much googling, and looking for a solution to this issue, the answer is in the comments of the repro link.

vramdal · 2021-04-08T11:37:17Z

Another tid bit, I have it running now after I updated Vue Jest. The router examples, don't work with the Vue 3 recommended vue router version ^4.0.3, I noticed you guys are on the older one which doesn't work with Vue 3 either. It will most likely give you a TypeError: removeHistoryListener is not a function

This happens on unmount, if you haven't called await router.isReady();
See the vue-router example.

kinoli · 2022-01-05T18:42:20Z

I'm getting an error that prevents my tests from working properly. Wondering if anyone knows why this might be happening.

[Vue warn]: Unhandled error during execution of render function 
      at <Alert ref="VTU_COMPONENT" > 
      at <VTUROOT>

Also curious if you could tell me what the difference between @vue/vue3-jest and vue-jest v5+ is?

afontcu · 2022-01-05T18:58:53Z

@kinoli hi! could you please open up an issue with a small reproduction of your setup?

Also curious if you could tell me what the difference between @vue/vue3-jest and vue-jest v5+ is?

It is explained on vue-jest's readme: https://github.com/vuejs/vue-jest#installation

Doeke · 2022-01-05T22:05:12Z

I had the same issue as kinoli and had to downgrade Vue test utils in order to fix it.

afontcu · 2022-01-05T22:07:12Z

@Doeke thanks for the report! could you please open up an issue either here or at https://github.com/vuejs/vue-test-utils-next/? This seems like an upstream issue, and having any kind of context (what didn't work, what downgrade made it work) is really helpful 🙏

thanks!

kinoli · 2022-01-05T22:12:13Z

Do you know what is involved in registering vue-i18n if you are using i18n in components?

This gets me part of the way there however it gives me warnings for not being able to find keys wherever I use t() within the script tags in my components. I'm probably missing some step but can't figure out what.

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'en',
  messages: {
    // some strings
  }
});
config.global.plugins = [i18n];

Doeke · 2022-01-05T22:15:24Z

@Doeke thanks for the report! could you please open up an issue either here or at https://github.com/vuejs/vue-test-utils-next/? This seems like an upstream issue, and having any kind of context (what didn't work, what downgrade made it work) is really helpful 🙏

thanks!

I noticed the issue started when Vue test utils updated from 2.0.0rc-16 to rc18 when the issue started so I added rc 16 to my package json to make it use that version and I believe that fixed it for me

nickmccurdy · 2022-02-08T01:23:20Z

As of today, Vue 3 is now the default Vue version.

Is there anything else we need to do to unblock releasing Vue 3 support? Just the user-event async issue?

afontcu · 2022-02-08T07:32:54Z

Hi @nickmccurdy! The current plan is:

To wait for Vue Test Utils to reach stable v2.0 (it is currently in RC). It is likely to happen during this week.
After that, release VTL's v6.x to the main branch, so that any npm i -D @testing-library/vue installs the Vue 3 version of the library. The v5 will still support Vue 2.

One of the main missing issues is handling async components (Suspense) #230. However this is potentially an upstream issue from Vue Test Utils, and something that can be tackled after moving to main branch.

nickmccurdy · 2022-02-08T08:54:21Z

Sounds like a good plan! We could ship a prerelease without full async support (and users may be able to use await or waitFor as workarounds), but I'll also see if there's anything I can do to help fix it in user event upstream.

paparent · 2022-02-08T14:01:18Z

Hi!

I setup a new project with npm i -D @testing-library/vue@next, as the Vue guide say: https://vuejs.org/guide/scaling-up/testing.html#recipes

But it seems that the next tag in npm isn't the latest 6.4.2 vs 6.5.1. Should we now install without the @next now?

Thanks!

afontcu · 2022-02-08T14:42:00Z

But it seems that the next tag in npm isn't the latest 6.4.2 vs 6.5.1. Should we now install without the @next now?

Hey! Yeah, you're right, looks like last release got issued in latest tag, not next – not sure why, though

I'll take a look and update next accordingly. Meanwhile, feel free to run npm i -D @testing-library/vue@latest or stick with next until I figure this out :)

wobsoriano · 2022-03-11T02:50:24Z

Any chance we can access the vm like in @vue/test-utils? Planning to do something like

import { waitFor, render } from '@testing-library/vue'
import { useQuery, VueQueryPlugin } from 'vue-query'
import { defineComponent } from 'vue'

function renderHook<T>(composable: () => T) {
  const App = defineComponent({
    setup() {
      const result = composable()
      return result
    },
    render() {},
  })

  const wrapper = render(App, {
    global: {
      plugins: [VueQueryPlugin],
    },
  })

  return wrapper
}

const wrapper = renderHook(() => useFetchData())
 
 await waitFor(() => wrapper.vm.isSuccess) // access vm
 
 expect(wrapper.vm.data).toEqual({ hello: 'world' })

falco467 · 2022-03-18T15:19:23Z

update: I've solved the problem by correcting import order of the libraries.
I cannot get reactivity to work with a Vue3 setup() Method, only with the (Vue2-Style) data option. Since I did not find any documentation about this, I took quite a while to pin the error down.

Is it expected to support reactivity with the setup syntax? Currently it seems the components are not updating/rerendering at all on value change.

Minimal testcase:

const c = {
  template: `<div>
  <span>Count: {{count}}</span>
  <button @click="count++">inc</button>
  </div>`,
  // data: () => ({count: 0})
  setup: () => ({count: ref(0)})
}

test('basic', async t => {
  const user = userEvent.setup()
  const comp = render(c)
  const b = comp.getByRole('button')
  comp.getByText('Count: 0')
  await user.click(b)
  await waitFor(() => comp.getByText('Count: 1'))
})

afontcu · 2022-03-19T08:07:01Z

Any chance we can access the vm like in @vue/test-utils?

Hi! No, as per definition of Testing Lib, this won't happen (it is one of the main reasons Testing Library exist on top of Vue Test Utils! 😄). If you really need to access vm for any reason, I suggest using Vue Test Utils directly. That being said, your example attempts to "unit test" a hook, so you could just unit test it without even rendering a component.

I cannot get reactivity to work with a Vue3 setup() Method

It should def work. Could you please open up a separate issue with a minimal reproduction case so we can take a look? :)

ahnpnl · 2022-06-07T13:55:48Z

Hi, when will @testing-library/vue support for Vue 3 switch to latest tag?

afontcu added the vue3 label Nov 20, 2020

afontcu pinned this issue Nov 20, 2020

afontcu mentioned this issue Jan 8, 2021

Vue 3: about rerender api design #198

Open

Robin-Hoodie mentioned this issue Jan 21, 2021

Install @testing-library/vue by default instead of @vue/test-utils vuejs/vue-cli#6228

Open

afontcu mentioned this issue Jul 26, 2021

Drop Node 10 support #231

Closed

afontcu mentioned this issue Jan 27, 2022

Vue Testing Library: Property 'updateProps' does not exist on type 'RenderResult' / rerender not updating props #262

Closed

afontcu unpinned this issue Apr 13, 2022

afontcu removed the vue3 label Mar 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for Vue 3 #176

Support for Vue 3 #176

afontcu commented Nov 20, 2020 •

edited

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021 •

edited

savannahp commented Feb 10, 2021

afontcu commented Feb 11, 2021

gmlewis commented Feb 23, 2021 •

edited

ITenthusiasm commented Feb 24, 2021

scambier commented Feb 25, 2021

vramdal commented Apr 8, 2021

kinoli commented Jan 5, 2022 •

edited

afontcu commented Jan 5, 2022

Doeke commented Jan 5, 2022

afontcu commented Jan 5, 2022

kinoli commented Jan 5, 2022 •

edited

Doeke commented Jan 5, 2022

nickmccurdy commented Feb 8, 2022

afontcu commented Feb 8, 2022

nickmccurdy commented Feb 8, 2022 •

edited

paparent commented Feb 8, 2022

afontcu commented Feb 8, 2022 •

edited

wobsoriano commented Mar 11, 2022 •

edited

falco467 commented Mar 18, 2022 •

edited

afontcu commented Mar 19, 2022

ahnpnl commented Jun 7, 2022

Support for Vue 3 #176

Support for Vue 3 #176

Comments

afontcu commented Nov 20, 2020 • edited

BREAKING CHANGES

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021

afontcu commented Feb 10, 2021

savannahp commented Feb 10, 2021 • edited

savannahp commented Feb 10, 2021

afontcu commented Feb 11, 2021

gmlewis commented Feb 23, 2021 • edited

ITenthusiasm commented Feb 24, 2021

scambier commented Feb 25, 2021

vramdal commented Apr 8, 2021

kinoli commented Jan 5, 2022 • edited

afontcu commented Jan 5, 2022

Doeke commented Jan 5, 2022

afontcu commented Jan 5, 2022

kinoli commented Jan 5, 2022 • edited

Doeke commented Jan 5, 2022

nickmccurdy commented Feb 8, 2022

afontcu commented Feb 8, 2022

nickmccurdy commented Feb 8, 2022 • edited

paparent commented Feb 8, 2022

afontcu commented Feb 8, 2022 • edited

wobsoriano commented Mar 11, 2022 • edited

falco467 commented Mar 18, 2022 • edited

afontcu commented Mar 19, 2022

ahnpnl commented Jun 7, 2022

afontcu commented Nov 20, 2020 •

edited

savannahp commented Feb 10, 2021 •

edited

gmlewis commented Feb 23, 2021 •

edited

kinoli commented Jan 5, 2022 •

edited

kinoli commented Jan 5, 2022 •

edited

nickmccurdy commented Feb 8, 2022 •

edited

afontcu commented Feb 8, 2022 •

edited

wobsoriano commented Mar 11, 2022 •

edited

falco467 commented Mar 18, 2022 •

edited