If you’re looking for how to do this in Visual Studio Code, those two articles might be helpful:

• https://medium.com/@mtiller/debugging-with-typescript-jest-ts-jest-and-visual-studio-code-ef9ca8644132
• https://medium.com/@jakubsynowiec/debugging-typescript-jest-unit-tests-with-visual-studio-code-36cd16865bb0

Luckily, setting up and debugging Jest and Typescript is simpler in Webstorm. If you just want to look at a finished setup, have a look at my repository. The demo repository has Jest tests for both a simple Express app (tested with supertest) and the simple React app (tested with Enzyme).

Important stuff to get Typescript and Jest to work:

• Using the ts-jest package to automatically transform .ts files to what Jest understands. This can be achieved with the following config in Jest’s configuration:

"transform": {
  "^.+\\.(ts|tsx)$": "ts-jest"
}

• To get proper support for keywords such as describe and test , don’t forget to install the @types/jest package
• To make sure the break-points work as intended make sure you have the "sourceMap": true in your tsconfig.json file. The tsconfig file needs to be in the root directory of the project, since it’s where Jest is typically launched from.

Almost there! All that’s left to do is add the Run Configuration to WebStorm, in the top right corner or in Run -> Edit Configurations, then simply add the Jest template using the plus symbol.

You should now have the Run task, like in this image on the left.

If you’ve ever debugged Java or .NET code this will feel very familiar to you.

The green button runs the tests, the red bug button runs the tests in debug mode, which should respect your break-points.

Simple as that! Feel free to ask me any questions about the setup. For a wealth of information on how to setup and use Webstorm’s debugger see the official docs.

This shell script is for my personal machine and I will explain what needs to be changed if you want to use it on your Linux machine.

Cool, I want to use it too, what do I change for it to run on my machine?

As you probably noticed, the script does everything in my home directory, /home/slava, so you should change all instances to your home directory. I use my /home/slava/Apps directory for my manually installed apps, change that to your directory.

The script also assumes you have the following installed:

• curl — to fetch the .tar.gz file
• rsync —for an easier time copying the VSCode files

I’ve also setup my $PATH variable to load /home/slava/Apps/code-insider/bin to be able to launch VSCode from a terminal, as well as adding VSCode to the App menu.

Feel free to ask questions, or suggest a better way of keeping VSCode Insiders updated on non-Debian or Redhat Linux distros. I’m using Manjaro KDE by the way, which I greatly recommend.

Wouldn’t it be amazing if your new React app tested and deployed itself automatically? It’s very simple thanks to GitHub and Travis CI (CI stands for Continuous Integration).

This guide is for you if you:

• Know how to create a JavaScript app. This example focuses on a simple React app, but all apps that follow the typical test and build jobs can be adapted.
• Know what unit tests are.
• Reasonably familiar with Git and/or GitHub.
• Reasonably familiar with the command line.
• Don’t know how to set up automatic tests and deployment.
• Need free hosting to show off your latest JavaScript project.

The guide will show how to create a simple React application, push it to GitHub, link it to Travis CI and then to GitHub Pages. The tutorial will not focus on what React is.

Step 1. Create a JavaScript app. Add tests.

For the purposes of this tutorial I will be using create-react-app, an ingenious tool for quick and tool-less creation of React apps. Apps made using the tool already have a sample unit test written.

• Make sure you have NodeJS and NPM installed. Run quick test commands node -v and npm -v to double-check.
• Runnpm install -g create-react-app to install the create-react-app utility globally on your computer
• To create a new app, create-react-app test-app . This command takes some time. Once complete, your app will be located in the /test-app directory.
• Make sure the app runs properly. Navigate to the project directory and run npm run start or npm start to start the development server. Once everything works, cancel the task by pressing ctrl+c.
• Make sure that npm run test runs successfully. It should have a single test suite setup with a single test in it.
• Make sure the npm run build command works. It should create a deployment-ready build in the /build folder.

Step 2. Create a GitHub repository, push your app.

Create an empty repository in GitHub without any files it. Make sure you have an SSH key added for your machine, then add your project files to a new git repo, then push it:

git init
git add .
git commit -m "first commit"
git remote add origin (URL OF YOUR REPOSITORY)
git push -u origin master

Refresh your repository page to make sure your app is now on GitHub.

Step 3. Generate a GitHub token.

On GitHub, go to your account settings -> Personal Access Tokens.

Generate a new token. The token has to have the ‘repo’ scope selected in order to be able to access your repositories. Save the token in a save place and do not include in any public repositories in plain text. The token will be used in the next section.

Note: the token should not be shared with anyone, it essentially gives an app access to edit your repositories.

Step 4. Link your project to Travis CI, add the .travis.yml file.

If you haven’t already, create a Travis CI profile using your GitHub profile. Add your newly added GitHub project to Travis using the green switch.

Before we create the Travis config file, we will add the GitHub token you created above to the Travis project. Go to the project settings in Travis and add a new Environmental Variable. Call the variable github_token, and set the value to the token you got from GitHub. This will enable Travis to use your token without you having to publicly put in in your repository.

Add the following .travis.yml file to the root directory of your project:

language: node_js
node_js:
  - "stable"
cache:
  directories:
  - node_modules
script:
  - npm test
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_token
  local_dir: build
  on:
    branch: master

What each line means in the file:

language: node_js

Tells Travis to use NodeJS.

node_js:
  - "stable"

Tells Travis which version(s) of NodeJS to use. Feel free to add additional versions, such as - "7" or - "6" .

cache:
  directories:
  - node_modules

Tells Travis to cache the node_modules directory between builds instead of re-compiling the whole directory each time you commit.

script:
  - npm test
  - npm run build

Important bit: tells Travis which commands to run. Commands run in a succession, and if a command fails (i.e. exits with anything but 0), the build is marked as failed. Failed builds do not get deployed. Note that Travis knows to npm install already.

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_token
  local_dir: build
  on:
    branch: master

The deployment structure. Detailed documentation about other deployment platforms available can be found here.

provider: pages specifies we’re using GitHub Pages.

skip_cleanup: true tells Travis not to delete build files.

github_token: $github_token sets the GitHub token. We used an environment variable to avoid exposing our token to the public.

local_dir: build tells Travis to only take the files from the /build directory for deployment

on: branch: master tells Travis when to trigger deployment. We only want to deploy when we push to the master branch of the repository.

Step 5. Set the homepage address in package.json

When you use GitHub Pages, your project is going to be hosted on a URL that looks like this:

https://USERNAME.github.io/PROJECT_NAME/

Following the above syntax, edit your package.json file to add a new entry with the URL of your project:

"homepage": "https://USERNAME.github.io/PROJECT_NAME/"

Setting the homepage informs the npm run build to add the right paths to the HTML file generated in the build directory.

Step 6. Commit and push.

Add the new .travis.yml file to git, commit the repository and push it to GitHub. Travis will automatically start building, testing and deploying it.

git add .
git commit -m "Added the travis file and homepage"
git push origin master

Travis will queue your project and build it as soon as it can. You can follow the execution on your home page. Once tested and built — your project will update on GitHub in settings to show that it’s now hosted on GitHub Pages. A new branch called gh-pages is created on your repository. The page contains the output from the npm run build command.

All done!

Check the URL created above and you should see your app there. This is the app I used for the guide, feel free to use for reference: source code, page hosted on GitHub Pages and the Travis logs.

References:

Travis CI Docs: https://docs.travis-ci.com/

Travis CI Docs - GitHub Pages deployment: https://docs.travis-ci.com/user/deployment/pages/

Create-React-App Docs — Deployment: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#github-pages