Support for Vue 3 - Githubissues

afontcu commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

savannahp commented 3 years ago

@afontcu yes I am!

afontcu commented 3 years ago

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 commented 3 years ago

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

savannahp commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

scambier commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

afontcu commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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

nickserv commented 2 years ago

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 commented 2 years ago

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.

nickserv commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

imatge

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

pavitra-infocusp commented 1 month ago

Vue 3 support works.

testing-library / vue-testing-library

Support for Vue 3 #176

BREAKING CHANGES