How to set up JavaScript testing for Rails 7 with Jest

In this article, we’ll see how to set up JavaScript testing, with Jest, for a brand new Rails 7 project.

Prerequisites for Ruby, Rails, and JS environment

Here are the tools I used for this tutorial.

$> ruby --version  
=> 3.1.2  
$> rails --version  
$> node --version  
=> 18.6.0  
$> yarn --version  
=> 1.22.19  

Create new Rails app – no JavaScript yet

$> rails new myapp && cd myapp  

Now wait for a minute… okay ! you have now a fresh new default Rails app.

Add the bare minimum files

Create a controller as follow in app/controllers/welcome_controller.rb

# inside app/controllers/welcome_controller.rb  
class WelcomeController < ApplicationController  

Configure a default route in config/routes.rb as follow

# inside config/routes.rb  
Rails.application.routes.draw do  
  get "welcome/index"  
  root to: "welcome#index"  

Add a view inside app/views/welcome/index.html.erb

<!-- inside app/views/welcome/index.html.erb -->
<h1>Hello !<h1>

Add and use an ES6 module

Create an ES6 module by creating a new file under app/javascript/magicAdd.js

// inside app/javascript/magicAdd.js
const  magicAdd = (a, b) => {
  return a + b;
export default  magicAdd;

And reference this file from the main pack :

// inside app/javascript/packs/application.js

// You can left pre-existing JavaScript, that's ok :)

import magicAdd from './magicAdd.js'

let a = magicAdd(2, 4);

console.log(`From mainjs, magicAdd result is ${a}`)

Stop your local web server, and run

$/myapp> bin/rails server

If no error is shown, you can run the local web server :

$/myapp> bin/rails s

Now open your browser and check the browser’s console to see if everything works properly.

Create a test for the JavaScript module

Create a new file inside test/javascript/magicAdd.spec.js

// inside test/javascript/magicAdd.spec.js
import magicAdd from 'magicAdd.js'

describe('magicAdd', () => {

  test('add two numbers', () => {
    // given
    let result = 0;
    // when
    result = magicAdd(1, 3)
    // then

Add JavaScript dependencies to run the unit test

We need now :

  • jest, which is our testing framework,
  • @babel/preset-env and babel-jest because of the use of ES6,
  • istanbul-reports to have a nice code coverage report.

So let’s run

$/myapp> yarn add --dev @babel/preset-env babel-jest jest istanbul-reports 

Configure Jest

Open package.json, it should look like this :

  "devDependencies": {
    "@babel/preset-env": "^7.18.10",
    "babel-jest": "^28.1.3",
    "istanbul-reports": "^3.1.5",
    "jest": "^28.1.3"

Add the following property to package.json, so that Jest will know which directories and file to watch, and which one to ignore :

   // all properties as above remain the same...
   "devDependencies": {
    "@babel/preset-env": "^7.18.10",
    "babel-jest": "^28.1.3",
    "istanbul-reports": "^3.1.5",
    "jest": "^28.1.3"
   // add the following property to package.json
  "jest": {
    "testPathIgnorePatterns": [
    "moduleDirectories": [
    "collectCoverage": true,
    "coverageReporters": [
    "coverageDirectory": "coveragejs"

Configure babel with your Rails app

Add the following code inside babel.config.js, at the root of your Rails project.

module.exports = { 
  presets: ["@babel/preset-env"],

Launch tests

That’s the big moment.


$/myapp> yarn jest

**yarn run v1.22.19**

**PASS** **test/javascript/****magicAdd.spec.js**


**✓**  **add two numbers (2 ms)**



**File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s**


**All files** **|** **100** **|** **100** **|** **100** **|** **100** **|**

**magicAdd.js** **|** **100** **|** **100** **|** **100** **|** **100** **|**


**Test Suites:** **1 passed****, 1 total**

**Tests:** **1 passed****, 1 total**

**Snapshots:** **0 total**

**Time:** **0.656 s**

**Ran all test suites.**

**✨  Done in 1.54s.**

And open coveragejs/index.html in your browser to get coverage.


Nothing complicated, but as often with npm projects, you have to take of dependencies and insert libs in the right order. Start from a simple example like this one to understand how things work, we hope it helped!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top