Skip to content

Auto importing Vue Testing Library in test files does not work if project is using TypeScript #319

@morcth

Description

@morcth

Describe the bug A clear and concise description of what the bug is.
I was watching a video of someone using Vue Testing Library amd writing their first test in VS Code. He typed "render" and the intellisense popped up and the TL render was the first on the list... which he chose and the import statement was added automatically to the top of the file.
This was not happening for me. My project has Typescript installed and configured. I created a new vue project without Typescript and all else the same and it worked as it did in the video... the Render from TL showed up and I chose it and the import line showed up.
It seems that TS can't find the functions from TL until it has already been imported while without TS it only needs to be installed and not imported for intellisense to find.

To Reproduce Steps to reproduce the behavior:

npm create vue@latest
Yes to only testing with Vitest
npm i -D @testing-library/vue
Go to the already created HelloWorld.spec.js
New blank first line in test already there
Start typing "render" (no quotes of course)
Correct library comes up and can be chosen and import statement generates

Do the same thing except on the new project, Yes to Typescript and Vitest
start typing render and test-utils render comes up as a choice but not testing-library

Expected behavior

I expect testing-library/vue's render to be a choice and auto import when using typescript like it works without ts.

Screenshots

Screenshot from 2024-08-12 11-56-22

Related information:

  • @testing-library/vue version: 8.1.0
  • Vue version: 3.4.29
  • node version: 20.15.0
  • npm (or yarn) version: 10.8.2

Relevant code or config (if any)

Additional context

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions