Jest Setup

Jest

For running Jest Tests, we will be using our Live VM feature.

The Dockerfile used will be the same as shown in this lesson with resources in that lesson’s appendix.

In case of LiveVM setup, whatever base image you use, you need to install node:8.15 via Dockerfile for the SPA + LiveVM to work.

In our case, as we are dealing with npm packages mainly, so our base image itself is node:8.15, therefore, we’re good to go with setting our LiveVM!

A Side Note:

If you need only install Jest and not eslint, prettier etc. then your Dockefile will simply look as follows:

FROM node:8.15

RUN npm install -g --save-dev jest 

For more details on Dockerfile and tarball creation please visit the first lesson of this guide.

For Live VM setup, follow the steps below:

• Make a new Docker job and check the Run in Live Container box:

• fill out the details in the Docker job as follows:

Field Details:

Job Name

This acts as an id to your docker job which is necessary.

jest

Input File Name

In Live VM, this field is optional. However, you can name it anything. We named it input.test.js as a place holder but you can even name it as foo here, it doesn’t matter.

Build Script

Build script compiles before the run script and start script which is optional.

Run Script

This script is compiled after the build script and it is compulsory. It basically runs your code every time the Run button is clicked (have a look at the SPA widget at the end of this lesson).

cd usercode && npm test && jest --watchAll && cd..

This basically

1. enters the usercode directory where all our files of use are placed
2. runs npm test and
3. adds a jest watcher, i.e. jest --watchAll to keep an eye out in case files are changed and tests need rerunning.

Application Port

8080

Run in Live Container

Check this box.

Start Script

The last script to compile when we click the RUN button in SPA widget and it is necessary. This script only runs once at the start when your app’s terminal is being initiated.

cd usercode && npm test && jest --watchAll && cd..

In this case, it is the same as Run Script, but depending on the scenario it need not be the same.

• Click Update, upon which the final Docker job should look as follows:
• create a SPA widget and select the docker job named as jest:

• Save the lesson
• Add relevant files using the Add File and Add Folder buttons in the SPA widget according to your requirements.

Note: package.json file provided in this lesson must be added as is. However, test configuration can be changed as shown below:

"scripts": {
    "test": "jest --coverage" 
  }

The script name “test” however should not be altered as that is what is used to run files in our Docker job.

Note: SPA with Live VM only Runs in preview or published mode (Not in Edit mode). So save your work and preview to Run the code.

After the above has been set up, the code can be tested by Jest as shown in the demo below:

Points to Note:

• We have added a watcher in jest by way of jest --watchAll command. Every time you make a new change to any of the files and ReRun the code, the watcher will detect these changes.
• If you want to reload this page or vist a new one, make sure to press q to quit the watcher, otherwise this will cause the terminal running your jest code to be stuck in that state when this page is visited again.
• To see all watcher options type w in the terminal when prompted.

Jest in Action on Educative

---

In the next lesson, we’ll bring it all together and wrap everything up. :)