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

Work with @vue/test-utils instead of @testing-library/vue #256

Open
TheJaredWilcurt opened this issue Aug 31, 2022 · 3 comments
Open

Work with @vue/test-utils instead of @testing-library/vue #256

TheJaredWilcurt opened this issue Aug 31, 2022 · 3 comments
Labels
feature request Request a new feature

Comments

@TheJaredWilcurt
Copy link

Is your feature request related to a problem? Please describe.

I didn't think it would really matter which tool I use, and was willing to use a new API/library, and if it means I get to preview Jest tests in a browser, then it would be worth it.

I tried @testing-library/vue but it couldn't do half of the things I need, the documentation is terrible, and it seems to enforce a bunch of very strongly opinionated obvious anti-patterns. So, yeah, I'm now switching back to @vue/test-utils.

If it means I have to give up browser rendering of Jest tests, then honestly I'm surprised to say this, but it's worth it to avoid using testing-library.

Describe the solution you'd like

Is there anyway you can make jest-preview compatible with @vue/test-utils?

Describe how should jest-preview implements this feature

Not sure about implementation details, but once implemented it would be good to update the docs with step-by-step guide for switching over to jest-preview, noting you support both @vue/test-utils and @testing-library/vue, with instructions for each.

Describe alternatives you've considered

I don't know if there are any other "Jest test in a browser" tools, but if so, let me know. It's a great debug feature to have, but not worth it if I can't write a simple test to begin with.

Additional context

I was very excited to learn about jest-preview, I even wrote up step-by-step instructions for Vue, as the jest-preview site didn't have them all in one place.

So if it's possible to use it with Vue-Test-Utils, I'd happily come back to it.
@TheJaredWilcurt TheJaredWilcurt added the feature request Request a new feature label Aug 31, 2022
@nvh95
Copy link
Owner

nvh95 commented Aug 31, 2022

Hi @TheJaredWilcurt. Thanks for reporting this issue.

jest-preview can work on any framework based on jsdom, so it doesn't matter if it's @vue/test-utils or @testing-library/vue. The example here uses @testing-library/vue just for demonstration purpose.

Did you try to integrate jest-preview with @vue/test-utils? If yes, can you share the outcome/ behaviors, it would help a lot. If not, can you help to try it? (Just run jest-preview CLI and execute debug() in your tests)

@TheJaredWilcurt
Copy link
Author

TheJaredWilcurt commented Sep 2, 2022 •
edited
Loading

Yes, after doing the dev.to setup I linked, I swapped @testing-library/vue out for @vue/test-utils. And changed from render to shallowMount (or mount, tried both).

Then added expect(2).toEqual(3) to for a test to fail (this worked before to show the component in the browser, in the same test). But it doesn't work, the browser refreshes, but the <body> is empty (except for the same <script> tag that was there before). Same thing with debug().

@TheJaredWilcurt
Copy link
Author

Here I made a reproduction:

It works with Testing Library, but not Vue Test Utils

If you can figure out how to make it work with Vue Test Utils, then that PR could be changed to npm uninstall @testing-library/vue and remove it from the import in that testing file. Then it would be read to be merged, retaining the testing-library example you already had, but also replacing it with Vue-Test-Utils as the default Vue implementation reference.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request Request a new feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@TheJaredWilcurt @nvh95