Giter Site home page Giter Site logo

ub1que / vscode-jest-runner-ext Goto Github PK

View Code? Open in Web Editor NEW

This project forked from firsttris/vscode-jest-runner

0.0 0.0 0.0 5.62 MB

Simple way to run or debug a single (or multiple) tests from context menu

License: MIT License

JavaScript 6.35% TypeScript 93.65%

vscode-jest-runner-ext's Introduction

vscode-jest-runner

Visual Studio Code Marketplace

VisualStudio Marketplace
Open VSX Registry

Comparison with vscode-jest

vscode-jest-runner is focused on running or debugging a specific test or test-suite, while vscode-jest is running your current test-suite everytime you change it.

Features

Simple way to run or debug a specific test As it is possible in IntelliJ / Webstorm

Run & Debug your Jest Tests from

  • Context-Menu
  • CodeLens
  • Command Palette (strg+shift+p)

Supports

  • yarn & vscode workspaces (monorepo)
  • dynamic jest config resolution
  • yarn 2 pnp
  • CRA & and similar abstractions

Extension Example

Usage with CRA or similar abstractions

add the following command to settings, to pass commandline arguments

"jestrunner.jestCommand": "npm run test --"

Debugging JSX/TSX with CRA

for debugging JST/TSX with CRA you need to have a valid babel and jest config:

to add a babel.config.js with at least the following config

// babel.config.js
module.exports = {
    presets: [
      ["@babel/preset-env", { targets: { node: "current" } }],
      "babel-preset-react-app",
    ],
  };

add a jest.config.js with at least the following config

module.exports = {
  transform: {
    '\\.(js|ts|jsx|tsx)$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|webmanifest|xml)$':
      '<rootDir>/jest/fileTransformer.js'
  },
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy'
  },
}

Check that debugger works: image

Extension Settings

Jest Runner will work out of the box, with a valid Jest config.
If you have a custom setup use the following options to configure Jest Runner:

Command Description
jestrunner.configPath Jest config path (relative to ${workFolder} e.g. jest-config.json)
jestrunner.jestPath Absolute path to jest bin file (e.g. /usr/lib/node_modules/jest/bin/jest.js)
jestrunner.debugOptions Add or overwrite vscode debug configurations (only in debug mode) (e.g. "jestrunner.debugOptions": { "args": ["--no-cache"] })
jestrunner.runOptions Add CLI Options to the Jest Command (e.g. "jestrunner.runOptions": ["--coverage", "--colors"]) https://jestjs.io/docs/en/cli
jestrunner.jestCommand Define an alternative Jest command (e.g. for Create React App and similar abstractions)
jestrunner.disableCodeLens Disable CodeLens feature
jestrunner.codeLensSelector CodeLens will be shown on files matching this pattern (default **/*.{test,spec}.{js,jsx,ts,tsx})
jestrunner.codeLens Choose which CodeLens to enable, default to ["run", "debug"]
jestrunner.enableYarnPnpSupport Enable if you are using Yarn 2 with Plug'n'Play
jestrunner.yarnPnpCommand Command for debugging with Plug'n'Play defaults to yarn-*.*js
jestrunner.projectPath Absolute path to project directory (e.g. /home/me/project/sub-folder)
jestrunner.changeDirectoryToWorkspaceRoot Changes directory to workspace root before executing the test
jestrunner.preserveEditorFocus Preserve focus on your editor instead of focusing the terminal on test run

Shortcuts

click File -> Preferences -> Keyboard Shortcuts -> "{}" (top right) the json config file will open add this:

{
  "key": "alt+1",
  "command": "extension.runJest"
},
{
  "key": "alt+2",
  "command": "extension.debugJest"
},
{
  "key": "alt+3",
  "command": "extension.watchJest"
},

Want to start contributing features?

Some open topics get you started

Steps to run in development mode

  • npm install
  • Go to Menu "Run" => "Start Debugging"

Another vscode instance will open with the just compiled extension installed.

Notes from contributors

  • Babel compile Issue when starting Debug in JSX/TSX,

  • By default Jest finds its config from the "jest" attribute in your package.json or if you export an object module.export = {} in a jest.config.js file in your project root directory.
    Read More: Configuring Jest Docs

  • If Breakspoints are not working properly, try adding this to vscode config:

"jestrunner.debugOptions": {
    "args": ["--no-cache"],
    "sourcemaps": "inline",
    "disableOptimisticBPs": true,
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.