Jest Test Setup in VSCode

This note walks through setting up Jest tests in VSCode using project-scoped tasks, and user-scoped keybindings.

As a prerequisite, note that jest allows you to run only tests whose name matches a particular regex via the -t flag on the command line, e.g., npx jest -t 'name of test'.

Project Tasks

You can create a .vscode/tasks.json file manually or via the command palette via "Tasks: Configure Task" and selecting "Other" to configure a manual task.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "all",
      "type": "shell",
      "command": "npx jest"
    },
    {
      "label": "file",
      "type": "shell",
      "command": "npx jest ${file}",
      "runOptions": {
        "reevaluateOnRerun": false
      }
    },
    {
      "label": "line",
      "type": "shell",
      "command": "npx jest ${file} -t \"${selectedText}\"",
      "runOptions": {
        "reevaluateOnRerun": false
      }
    }
  ]
}

• ${file} and ${selectedText} are vscode task variables
• runOptions -> reevaluateOnRerun: false is a particular task run behavior that does not re-substitute the variables when you rerun the test. Task variables will check your cursor position, amongst other things, to determine the content of the variable, like file name. This is "reevaluation". Turning it off, by setting it to false, tells VSCode to use the old, original value instead. So, now, you can edit the source code that caused the failing test, and immediately rerun the test using the old variable values. You are basically telling vscode, "just rerun the test, don't reevaluate the variables."
• In order to get the "line" task to run, you need to select the text of the test name. Since I use Vim VSCode, I use vi' to select the text inside the single-quotes and then run alt+l, as you will see below.

User Keybindings

You can access these in the command palette via "Preferences: Open Keyboard Shortcuts (JSON)". This file is deep inside system dirs and can be controlled by settings sync.

• The last keybinding below, reRunTask, is the command associated with the reevaluateOnRerun: false setting from above. So when I press alt+r, I will rerun the previously ran test, no matter where my cursor is. (The location of the cursor determines the ${file} and ${lineNumber} task varaibles.)

[
  {
    "key": "alt+a",
    "command": "workbench.action.tasks.runTask",
    "args": "all"
  },
  {
    "key": "alt+f",
    "command": "workbench.action.tasks.runTask",
    "args": "file"
  },
  {
    "key": "alt+l",
    "command": "workbench.action.tasks.runTask",
    "args": "line"
  },
  {
    "key": "alt+r",
    "command": "workbench.action.tasks.reRunTask"
  }
]

Now, for example, if your cursor is inside a particular test, you can press alt+l to run that test. Also, these user-scoped keybindings can be associated with any project-level task with the same name, so in theory these keybindings work across languages and frameworks, etc. For example, I use these same keybindings to run tests in Elixir (see my note on Elixir Test Setup in VSCode for more on that)