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.

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

Bug: DOM sometimes not being updated #1476

Closed
SkippedTurn opened this issue May 3, 2022 · 4 comments · Fixed by #1479
Closed

Bug: DOM sometimes not being updated #1476

SkippedTurn opened this issue May 3, 2022 · 4 comments · Fixed by #1479
Labels
bug Something isn't working

Comments

@SkippedTurn
Copy link

Describe the bug
As of the test-utils version 2.0.0-rc.21, some of our tests started failing seemingly because the DOM was not being updated. For one component I managed to narrow the cause of this down to an equality check between two objects somehow no longer resolving to true, even when they both refer to the same object.

(Unfortunately the other components for which tests were broken are relatively old code, so I couldn't immediately verify whether those failures share a similar cause.)

To Reproduce
Here is a small repo in which the issue is reproduced: https://github.com/SkippedTurn/reproduction-recipe-test-utils. The line that seems to be causing the issue is ln7 in "TestComponent.vue".

In the above project, if the v-if is replaced with v-if="selectedField?.name === field.name" so that the check is done on strings instead of Objects, everything does work again.

Expected behavior
The equality check resolves to true, and the associated tests succeed.
Note that, outside of the tests, the component works as intended with the latest version of Vue (3.2.33).

Related information:

  • @vue/test-utils version: 2.0.0-rc.21
  • Vue version: 3.2.33
  • node version: 18.1.0
  • npm version: 8.8.0
@SkippedTurn SkippedTurn added the bug Something isn't working label May 3, 2022
@freakzlike
Copy link
Collaborator

This is caused by #1434. We might need to revert this changes and find another way to get props with Ref working.

@freakzlike
Copy link
Collaborator

Just as hint: I was able to run your reproduction successfully with:

import { reactive } from 'vue';

const wrapper = mount(TestComponent, {
  props: { availableFields: reactive(FIELDS) }
});

or

import { readonly } from 'vue';

const wrapper = mount(TestComponent, {
  props: { availableFields: readonly(FIELDS) }
});

Maybe this workaround is easier for you instead of changing the v-if

@lmiller1990
Copy link
Member

Looks like we have a fix. That said, relying on object equality seems unideal in general - comparing primitives seems far superior, with no real downside.

lmiller1990 pushed a commit that referenced this issue May 20, 2022
* chore: Add regression tests for #1476

* fix: reactive props and keep refs

* chore: fix type compile error on test component
@SkippedTurn
Copy link
Author

@lmiller1990 I agree with that, and this bit of code will probably be refactored to just that at some point to make it a bit more robust. But in the meantime: thank you for the fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants