testing-library / vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
http://testing-library.com/vue
MIT License
1.07k stars 111 forks source link

Fixed - 'Name:' field always blank for getByRole #267

Closed DGollings closed 2 years ago

DGollings commented 2 years ago

I'm, like most people, new to Vite/Vitest and personally new to testing using the DOM

if you read the manual it states here how to configure your environment https://vitest.dev/guide/features.html#mocking in particular this line environment: 'happy-dom', // or 'jsdom', 'node' it states, albeit implicitly, that happy-dom is the default for Vitest

I've spent the past week working around (and wondering why) getByRole never worked. And by never worked I don't mean something like a big exception. Just subtle, shows you the options, what it sees, etc. But Name: was always blank.

I've just now figured out that environment needs to be jsdom for testing using getByRole. A warning somewhere, in docs or runtime, would have been nice :)

afontcu commented 2 years ago

Hi! Haven't had the chance to try out the vite+vitest+happy-dom+VTL combination, but I don't think there should be an issue using getByRole 🤔 could you please share a small reproduction example so I can dig in a bit?

thanks!

DGollings commented 2 years ago

Hmm, that's not good (for me)

https://github.com/DGollings/happy-dom-vitest-example to start: npm install npx vitest run

It works :), so question would be, why doesn't it for me.

My real project is of course much more complex, an easy start is to compare dependency versions in package.json. Where else would you suggest I look?

DGollings commented 2 years ago

Updated all my real dependencies to match the versions in happy-dom-vitest

"dependencies": { - "happy-dom": "^2.46.0", + "happy-dom": "^2.55.0", }, "devDependencies": { + "@testing-library/dom": ">=7.21.4", - "@testing-library/vue": "^6.4.2", + "@testing-library/vue": "^6.5.1", - "typescript": "^4.4.4", + "typescript": "^4.5.4", - "vite": "2.9.0", + "vite": "^2.9.2", - "vitest": "^0.8.0", + "vitest": "^0.9.3", },

And it works :)

So one of these versions, although none of the obvious to me candidates worked when I tried a couple (happy-dom, testing-library/vue and /dom) made it not work, not even after reverting the change (didn't nuke node_modules though)

Anyway, I'll change the title to something easier to search for anyone with a similar issue. And the solution seems simple, update your dependencies.

Thanks