DEV Community

loading...
Cover image for 3 Steps to Frictionless TDD with Jest and VS Code

3 Steps to Frictionless TDD with Jest and VS Code

Derek N. Davis
I love all things JavaScript and have been developing for the web since 2012.
Originally published at derekndavis.com ・2 min read

If you're looking to make writing your Jest tests easier in VS Code, look no further. In my quest to optimize my testing, I've tried several approaches, but I always come back to this workflow.

1. Configure VS Code

No more tiny terminal squeezed at the bottom of the editor. View your terminal and test file side by side by dragging the terminal to the action bar.

Moving the VS Code terminal to the action bar

2. Target a Single File in Watch Mode

Jest watch mode will automatically re-run your tests when anything changes. Provide it a file name or pattern to limit what files are ran. Here we're running just the "string" file.

jest --watch string
Enter fullscreen mode Exit fullscreen mode

Running tests in watch mode targeting the string file

Something to note here is that "string" will match on folders and file names. There are various ways to target different test files to run. Check out the Jest Docs to learn more.

3. Focus on One Test

You may have used it.skip to skip certain tests, but we can also make it run a certain test with it.only. In this case, we're focusing on the "should trim" test.

it.only('should trim', () => {
  schema.trim().cast(' 3  ').should.equal('3');
});
Enter fullscreen mode Exit fullscreen mode

Make your test pass, and go back to step 2!

P.S. Don't forget to remove .only before you run jest --coverage, or you'll have a heart attack when your percentage drops to nothing.

Summary

  • Setup VS Code to show your terminal side by side with your test
  • Focus on a single test at a time to reduce noise in the terminal and boost your productivity

Happy testing

Discussion (2)

Collapse
brooksforsyth profile image
Brooks Forsyth

Did not know you move the terminal like that!!! awesome!

Collapse
ra1nbow1 profile image
Matvey Romanov

Useful feature with terminal