search

nvh95 / jest-preview

Debug your Jest tests. Effortlessly.🛠🖼
https://www.jest-preview.com
MIT License
2.34k stars 76 forks source link

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

Open TheJaredWilcurt opened 2 years ago

TheJaredWilcurt commented 2 years ago

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.

nvh95 commented 2 years ago

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

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

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.