Support for Vue 3

[afontcu]

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:

• [x] Update types: #180
• [x] Add suport/example for vue-apollo: #192
• [x] Handle Vue Router: #191
• [x] ...properly: #195. RFC: #205
• [x] Rethink rerender/setProps: #198 (for now, it stays as it is, because it matches Testing Library ecosystem expectations).
• [ ] Find a way to test async components https://github.com/testing-library/vue-testing-library/issues/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 #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.

[savannahp]

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

- [email protected] (C:\Users\xxxx\projects\xxx\node_modules\vue\index.js)
- [email protected] (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]

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]

@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]

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

[savannahp]

@afontcu yes I am!

[afontcu]

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]

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

[savannahp]

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]

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]

I'm running into the same issue with Vue3 and [email protected] 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]

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

[scambier]

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

- [email protected] (C:\Users\xxxx\projects\xxx\node_modules\vue\index.js)
- [email protected] (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]

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]

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]

@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]

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

[afontcu]

@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]

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]

@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]

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]

Hi @nickmccurdy! The current plan is:

1. To wait for Vue Test Utils to reach stable v2.0 (it is currently in RC). It is likely to happen during this week.
2. 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]

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]

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]

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]

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]

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]

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]

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