Max Schmitt

March 29 2024

VS Code: 3 Ways to Navigate Long Test Files

If you're a big believer in tests, it's likely that you'll end up writing lots of them. And naturally, test files can get pretty long.

Here are three ways you can get a quick overview of all the tests in your test file in VS Code.

1. Go to Symbol

This one is my favorite.

If you use VS Code's "Go to Symbol in Editor" feature, you get a list that you can easily filter for describe or it blocks.

I have this bound to CMD+R but you can also access the feature via "Go to File" (CMD+P) and then typing @.

2. Fold and Unfold

This one is also useful, since test files are usually structured by nesting it blocks inside describe blocks.

The great thing is that we can use this method without leaving our keyboard. Press OPTION+CMD+[ to fold a block and OPTION+CMD+] to unfold it.

Of course you can also use the fold/unfold buttons in the gutter of the editor.

Fold/unfold button in the gutter of VS Code

3. Outline View

And lastly, the outline view.

I suggest collapsing all the nodes and then expanding them one by one to discover the structure of your test file.

I end up using this method the least because I most-often reach for the symbol picker so I don't have to leave the keyboard. 🤓

Conclusion

I hope these methods help you out a bit the next time you're working with a long test file in VS Code!