Using a non deprecated function should not print a deprecation warning

[maxarndt]

Version

1.0.0

Reproduction link

https://github.com/maxarndt/repro-vue-test-utils-deprecation-warning

Steps to reproduce

1. Clone repro repo
2. npm i
3. npm test

What is expected?

Using a non deprecated function as .destroy() should not print deprecation warnings.

What is actually happening?

Using the above mentioned function prints a deprecation warning.

---

The implementation of .destroy() needs to be updated to use the successor of isVueInstance.

[TheDutchCoder]

We can also add isVisible to this list (as it uses isEmpty for which a deprecation warning is thrown).

The error also has a mistake in it: "isVueInstance is deprecated and will removed in the next major version" should be "isVueInstance is deprecated and will be removed in the next major version"

Honestly I'm disappointed by this release, it feels like their own code wasn't tested?

[lmiller1990]

Ah, I forgot we call isVueInstance in destroy. I will fix this one now.

Ideally we would have moved into release candidates to avoid missing things, but after literally years in beta and about 12 months of no-one maintaining the repo, and with Vue 3 in the near future, it felt a bit silly to drag it out any longer.

Please review so I can do a patch: #1533

[lmiller1990]

This is fixed in the latest version (1.0.2). Try installing that one.

Lmk if any others come up. And yes, we should have had better tests around the deprecations. Focus has largely been elsewhere, mainly around Vue 3, but that's no excuse. Let's make sure we keep the standards high.

[TheDutchCoder]

Thanks I'll give it a whirl in a bit to see if it's resolved.

I appreciate all the hard work though, just found it odd that the internal build has these warnings suppressed on purpose, that seems to sort of defeat their purpose a bit ;)

[lmiller1990]

Cool. LMK if other things sneaked through.

[TheDutchCoder]

So far it's not going too well, it looks like some of the deprecations don't have any solutions.

Example:

// This throws 2 warnings: find, and isVisible
expect(wrapper.find(Loader).isVisible()).toBe(true)

// This fails, because findComponent returns an object, and `toBeVisible` (as suggested by vue-test-utils) expects markup
expect(wrapper.findComponent(Loader)).toBeVisible()

[lmiller1990]

Hm, tricky one. I always search for a DOM node and assert against that, so I did not catch this case. The two deprecations make sense individually but not when shown together.

The general idea moving forward to favor finding and asserting against DOM nodes, rather than components (DOM node are more reliable - there are, and likely always be, some edge cases with finding components).

Edit: people smarter than me pointed out expect(wrapper.findComponent(Foo.element)).toBeVisible(). I will update the deprecation to suggest element as well.

[lmiller1990]

#1534 This should improve the message @TheDutchCoder

[TheDutchCoder]

Ah ok, .element makes sense, as I was confused why there was such an emphasis on finding components over DOM nodes before and now that thought has switched?

I'm okay with either, as long as I can write tests of course :)

Thanks for the heads up, I will upgrade and update my tests.

[p0psicles]

Maybe this is related. But when I'm running this test:
expect(wrapper.find('#element-id')).not.toBeVisible();
im getting the error: TypeError: expect(...).not.toBeVisible is not a function

I'm trying to apply as stated in the deprecation warning, but i'm not getting any further? Can anyone help?

[afontcu]

Hi @p0psicles! toBeVisible is part of jest-dom, you might want to install that library to use its assertions.

[p0psicles]

As you might already have noticed I'm not as well versed in front end testing as you guys. The documentation on using jest-dom icw vue-test-utils is really minimal. As it's mostly focused on react. Can anyone redirect me to some valuable docs on this? I was doing fine until the deprecation warnings popped up.

[afontcu]

@p0psicles no problem!

the deprecation messages are just that – deprecation messages. Your tests will keep doing fine for a while, you don't need to worry about them right now!

That being said, jest-dom is framework-agnostic, so there's nothing on it that makes it React-specific. After you install the library, its matchers become available so you can write expect(...).toBeVisible().

Hope this helps 🙌

[hiendv]

If you're here looking for a transition for
[vue-test-utils]: isVisible is deprecated and will be removed in the next major version. Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobevisible. When using with findComponent, access the DOM element with findComponent(Comp).element.
Let me summary above comments and hope it could save you some time

// old assertion
expect(wrapper.find('.selector').isVisible()).toBeTruthy() // .toBe(true)

// new assertion
import '@testing-library/jest-dom' // leave it in the top of the file or in the test setup file
expect(wrapper.find('.selector').element).toBeVisible()

You should have @testing-library/jest-dom installed.