Run and Debug TypeScript Unit Tests in Neovim

Hello Elijah here in this video I'm going to show you how to run jest and v test unit tests inside of neovim and at the end I'll even show you how to debug one of those tests too alright so let's get going so here I have a typescript application with some just unit tests I could pull up the baked in terminal in lazyboom and run npm run to see what scripts we have available and yes test is defined so we could run them with npm test and it'll kick up just in watch mode and boom we have one test passed and one test failed like a rerun the failed test and sure enough there is the problem well wouldn't it be nice if I didn't need to kick up the internal terminal or rely on another terminal tab or multiplexer window why yes yes it would and that's exactly what we're going to do thankfully in lazyvim already has a helpful plugin to get us started from the docs you can look at the plugins and Extras then look for the neo-test entry so we'll copy the import line with test.core and then switch over to our neovm configuration and we'll navigate to the Lewis config folder and open up the lazy.lua file from here we'll paste in our test.core import and then save and restart neovim and you'll see that lazy.invim is starting to install the neo-test plugin okay now let's close lazy.in boom and open up a new file called test.lua where we'll paste in a bit of code configuring neo-test new test itself has already been wired up in our previous step the importance of this step is that it defines the neo-test dash jest adapter that builds on top of the base neotest plugin so we'll add the neo-test dash dependency on line 16 and in the Ops function we'll register the adapter the reason we're updating the Ops and not doing this work directly inside the config function is that lazyvim already has code in its config for neo-test to Loop through all the adapters and set them up individually so that you don't have to okay let's save and quit outside of neovim and restart and we'll see that the neo-test desk just adapter is installing and when it's done let's quit and change back to our next JS typescript project with just unit tests then we'll open up neovam and open up our recent file of index.test.ts and here are our tests again I'll come down inside the first test and press leader TR which will run the nearest test and you'll see that nothing happens huh well I haven't tracked it down and fixed it just yet but you'll just have to do it again and it'll work you should only have to do that the first time but there it is okay so the tests ran and boom there's the results inside of the of him pretty cool instead if you wanted to run all the tests in the file you could press leader TT and you'll see that our second test fails if you want a higher level overview of your tests then you could press leader TS to toggle the test summary which shows up on the right as a pane with a status indicator next to each item and you could close it with the same key binding if you have a lot of Errors you can navigate to the next one in the buffer with right hard bracket e and likewise to the previous one with left hard bracket e in this case it shows you a snippet of the error message which could be helpful let's switch back to our neovim config and add another key mapping that might be helpful we'll open up the test.luo file and then add a new section called keys and we'll Define a new mapping for leader TL which will run the last test that was previously ran and to test it out let's save this file and reopen neovam opening the just test file and as before I'll hop down to the first test and run that test with leader TR which runs it then I'll jump to the second unit test which hasn't run yet and then run our new mapping of leader TL which will run our last test which was the one above and sure enough it runs as expected cool as an aside if we open up the test summary as before you could run one of the entries by typing r typing a attaches to the test results and you can navigate through the output and typing I jumps to that specific test think of that as inspect okay while not everyone uses just these days to run their unit tests some use v-test as their unit test Runner so let's switch to a project that uses v test and give it a run but first if you liked what you've seen thus far please consider booping the like button so it could spread to more people thank you it really does help all right let's get back to it okay so in this project I'll open up the home.test.tsx file and as before I'll hop down inside of one of the tests and type leader TR to run the nearest test however in this case neotest tells me that no tests found oh bummer well thankfully this solution is adding another adapter for neotest that is specific to vtest so let's switch back over to our neovim config and I'll open up the test.luophile again and we'll add an entry to the dependencies for neo-test dash v test and then in our Ops function I'll add a table insert to register the new adapter alright and I'll save and quit and relaunch neovim and here you'll see that the neo-test dash v test adapter is being installed and we can reopen the home.test.tsx file from before and this time when we press leader TR It'll recognize this type of test and run it yay okay but what about debugging one of these unit tests remember the failing just test that we had before wouldn't it be nice to kick up a debugger session and look at that well let's do that now but before we could do that let's open up our neovim config again and we'll go back into our lazy.luophile thankfully lazyvin provides yet another set of configs for us to use to help out with debugging it's the DAP core import so I'll copy the import line extras.dap.core and then paste it into our luo file and then save and quit neovim and that should be all we need however you might be wondering should we need to set up anything else well no and it already has been done for us the typescript extra import that it was already using from lazyboom had nvim dap settings already set up for us that we can now leverage in particular using pwa-node when debugging code so let's open back up our typescript project that has our just tests and here you'll see the plugins defined inside the datcore import installing and then we could bring up our unit test file again and navigate down to the second test we'll confirm that it's still failing by pressing leader TR to run the nearest test and yes it's failing and now we'll press leader and pause to bring up which key and see that there's a d entry for debug so let's press D and here we'll want to press B to toggle a breakpoint and boom there's a breakpoint indicator to the left on the line at this point we'll press leader T and pause for which key to see the D which will debug the nearest test which is what we want and that will kick up the DAP UI and start to kick up a debugger session my terminal is zoomed in quite a bit so your experience shouldn't be as cramped as this one so now execution has paused at our breakpoint as indicated by the yellow arrow on the left now let's step over this line by pressing leader D to see which key and typing capital O which brings us to the next line where the expect call is the top left panel shows local variables that are in scope which in this case is the links array and the this implicit object so you could interact with these and I could expand the links and Visually see that there are six of them and get more information and I can move down to the Expressions Pane and type in something for it to evaluate like links.link and it'll show that there are six and when you're all done you can press leader DT to terminate your debugging session thank you again for joining me on this testing Journey if you find this content helpful please consider subscribing if you haven't already and maybe even becoming a member as well there are some additional benefits for members and it helps support the channel alright until next time keep learning

Channel: Elijah Manor

Views: 15,678

Keywords: Debugging, LazyVim, Neovim, Unit Testing

Id: 7Nt8n3rjfDY

Length: 9min 1sec (541 seconds)

Published: Wed Jun 28 2023