Run and Debug TypeScript Unit Tests in Neovim

In this video I show how to take LazyVim as a starting point and add support to run Jest and Vitest unit tests inside of Neovim with neotest. Then I add more config to support debugging a unit test.

You can find the config that I added in the following gist

If you liked this video, please like and subscribe for further content.

00:00 Introduction
00:11 Add Jest Support
04:40 Add Vitest Support
06:00 Adding Debugging
08:44 Conclusion

#neovim #lazyvim #unittesting #debugging #jest #vitest

[ElijahManor]

If you liked this video, please like and subscribe for further content.

[ascourter]

Great video! It makes a huge difference to see those test outputs in your editor instead of a separate terminal window.

[IainSimmons]

This is awesome, been waiting for it for a while. It was certainly worth the wait!

Some part of me wished for a happy ending where you fixed the test and everything passed though! 😅

[MrRollhax]

Man, I was struggling to wrap my head around neovim config. Your videos have helped a ton. Thank you for all of these - I'm enjoying coding and tinkering again like I haven't since I was 14.

[ErmandDurro]

Great content as always. Love it that you included the debugging part as well 😀

man, your videos are so good!!
i have no words

[macmanuelodumeru]

Finally, Awesome as usual 🔥🔥🔥

I wonder what's up next

[theherk]

These videos are superb. Very helpful. Instant sub.

[crowvampire]

Great tool to debugging, usually I used vimspector until now, I will replaced by this haha, thank you for sharing 👍🏻

[gugahoi]

Thanks for sharing this video, neotest and the jest adapter are great. I was really hoping you'd cover the "watch" mode that neotest has. I have been unable to get that setup with the jest adapter unfortunately but I just feel like it's a superior workflow when you get instant test feedback that runs on save. Theoretically, neotest uses treesitter to work out impacted files and should run tests related to them but alas I have not been able to get it to work myself. Maybe you can give that a shot and if you're successful, a video would be incredibly useful!

[ducbinhpham]

I've been waiting for this, thanks so much ^^

[filipebraganca]

Nice way to debug!!! Thanks for sharing

[egjxbeb]

Thanks for this video !
i followed the steps one by one and when i debug (nearest) i get a DAP error. "Couldn't connect to localhost:{port} ECONNREFUESD"
what am i missing?

[develanton]

Cool vid, hey what is the font you are using on your terminal? cool icons.

[djbessel]

This really helped me set up debugging in LazyVim, including tests and other node applications I can attach to. I'm still puzzled how to launch Chrome and debug frontend stuff, though. I can't get LazyVim to work with nvim-dap-vscode-js, and I'm wondering why it seems to set up adapters on its own instead of leveraging that plugin.

[ducbinhpham]

Hi, after an hour of modifying the config to accommodate for my big monorepo, I went to lunch thinking it probably won't work, I came back from lunch and It's working now, thanks you so so much.
Now that I've got used to neovim, it''s hard to come back to vscode again because I keep having to reach for the mouse 🤣🤣🤣🤣

[brittager]

Wonderful.
Would it possible to also provide the link to the Github repo of the project you're using for the demos? If the project is not confidential.
Because when you say "let's go to our ... (tailwind, typescript) project, people might not have a project fitting that requirement, thus making it harder to follow along.
Just a suggestion for something to add to the description below the videos.
Keep up the magnificent work

[maguilecutty]

This is a GREAT vidoe thanks - anyone know how to set it up for 'side by side' testing where the test file lives next to the component file? would be greatly appreciated thanks!

[brittager]

There are some things I do no understand from the video.
What do the following neotest-jest options do?
```
jestCommand = "npm test --", // why do we need the double dash ?
jestConfigFile = "custom.jest.config.ts", // where do I find this file? What is it? What if I don't have it?
env = { CI = true },
```

[raulvargasmunoz]

Is it possible to only use the without install everything else?
Great video btw.