Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reactivity issues with @vue/compat #275

Open
Weetbix opened this issue Jul 7, 2022 · 5 comments
Open

Reactivity issues with @vue/compat #275

Weetbix opened this issue Jul 7, 2022 · 5 comments
Labels
bug Something isn't working

Comments

@Weetbix
Copy link

Weetbix commented Jul 7, 2022

Hi! 👋

Reactivity does not seem to work when using the vue compat build.

For example these tests will work with vue 3, but not with @vue/compat:

import {ref, onMounted, defineComponent} from 'vue';
import {it} from 'vitest';
import {render} from '@testing-library/vue';

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const TestAsync = defineComponent({
    template: '<div><div>{{ mountText }}</div><div>{{ asyncText }}</div></div>',

    setup() {
        const mountText = ref();
        const asyncText = ref();

        onMounted(() => {
            mountText.value = 'mounted';
        });

        sleep(0).then(() => {
            asyncText.value = 'async';
        });

        return {
            mountText,
            asyncText,
        };
    },
});

it('should show onMount text', async () => {
    const {findByText} = render(TestAsync);
    await findByText('mounted');
});

it('should show async text', async () => {
    const {findByText} = render(TestAsync);
    await findByText('async');
});

In compat mode it will show:

TestingLibraryElementError: Unable to find an element with the text: async. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<body>
  <div>
    <div>
      <div />
      <div />
    </div>
  </div>
  <div>
    <div>
      <div />
      <div />
    </div>
  </div>
</body>

To Reproduce Steps to reproduce the behavior:

Use this minimal reproduction repo: https://github.com/Weetbix/vue-compat-composition-api-bug-repo

Expected behavior

The tests should pass, and the text should be found in the dom

Related information:

  • @testing-library/vue version: 6.6.0
  • Vue version: 3.2.37
  • @vue/compat version: 3.2.37
  • node version: v16.13.2
  • npm (or yarn) version: 1.22.19

Additional context

We have a very large code base and were hoping to migrate to Vue 3 by using compat mode. It's working at runtime but we are running into reactivity issues in the test suites.

Note: This issue also exists in the new vue 2.7` build with the backported composition API.

It does not occur in Vue 2.6 when using the @vue/composition-api plugin.
@Weetbix Weetbix added the bug Something isn't working label Jul 7, 2022
@lisilinhart
Copy link

lisilinhart commented Jul 8, 2022 •
edited
Loading

I encountered the same problem in the Vue 2.7 build with the backported composition API. The old option api components test without a problem, but when using the SFC syntax the reactive content will be missing.

Related information:

  • @testing-library/vue version: 5.8.3
  • Vue version: 2.7.4
  • node version: v16.11.1
  • npm (or yarn) version: 1.22.18

This problem also occurs when using import { mount } from '@vue/test-utils' itself on that version

@afontcu
Copy link
Member

afontcu commented Jul 11, 2022

Hi!

This problem also occurs when using import { mount } from '@vue/test-utils' itself on that version

If I read that correctly (correct me otherwise!), does it mean that ignoring Vue Testing Library and using Vue Test Utils directly does also yield these reactivity problems? If that's the case, then this is an upstream issue in Vue Test Utils and should be reported there.

thx!

@lisilinhart
Copy link

@afontcu Yeah, I think it might be an issue of the @vue/test-utils itself, which is used here as the main dependency. I will try to open a test case there. Just for you to be aware that it's influencing any larger codebase going from v2 -> v3 using this library

@Weetbix
Copy link
Author

Weetbix commented Jul 11, 2022

Thansk @lisilinhart and @afontcu :) I didn't think to check if it was originating from @vue/test-utils

@lisilinhart lisilinhart mentioned this issue Jul 11, 2022
Open
@lisilinhart
Copy link

Thanks @Weetbix @afontcu: I opened this issue here: vuejs/vue-test-utils#1983

@Weetbix Weetbix mentioned this issue Jul 15, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Weetbix @afontcu @lisilinhart