Integrating Jest with Gulp
Darasimi-Ajewole

Darasimi-Ajewole @darasimiajewole

About: Software Engineer with experience in building low-latency web applications and highly performant programs.

Location:
UK
Joined:
Dec 12, 2019

Integrating Jest with Gulp

Publish Date: Jun 3 '21
4 5

The Gulp-jest plugin for running jest tests are extremely limited in their integrations with gulp workflow. Fortunately, Jest provides jest-cli, a library that allows you to run jest tests programmatically and also returns the result of the test. Taking advantage of this package, you can customize the operation of your gulp workflow.

To get started, install the jest-cli in your project:

npm i jest-cli
yarn add jest-cli
Enter fullscreen mode Exit fullscreen mode

To run jest tests programmatically with jest-cli, a sample code on how this is done is provided below:

const jest = require('jest-cli');
const testRunner = async () => {
  const { results } =  await jest.runCLI(
    {json: false}, // jest cli options, check out more on https://jestjs.io/docs/cli
    ['project_directory'] // array of project directories in order to run multiple project tests
  )
  console.log(results);
  return results;
}

testRunner();
// clipped result
`{
    numFailedTestSuites: 0,
    numFailedTests: 0,
    numPassedTestSuites: 5,
    numTotalTestSuites: 7,
    numTotalTests: 98,
    success: true,
    testResults: [
      [Object]
    ],
    wasInterrupted: false
 }`
Enter fullscreen mode Exit fullscreen mode

Please note, the code above should work on versions of jest-cli <= 24.9.0, but might fail to work on newer versions of jest-cli, this is due to runCLI which is a private method not guaranteed to have the same behaviour across all versions of jest-cli.

From the returned results of the jest.runCLI, you can write a lot more jest integrations with your gulp workflow, and customise the behaviour of the workflows better than gulp-jest allows.
A popular integration of test frameworks with gulp workflows would be aborting workflows if tests don't pass, a simple way to implement this with the help of jest-cli is shown below:

// gulpfile.babel.js
const jest = require('jest-cli');

async function testJS() {  
   const testResults =  await jest.runCLI({json: false},['project_directory'])
   const { results } = testResults
   const isTestFailed = !results.success;
   if (isTestFailed) {
       console.log('You have some failed test cases, kindly fix')
       process.exit() // Breaks Gulp Pipe
   }
}

gulp.task('build', gulp.series(
  testJS,
  buildAssets,
  // Any other gulp tasks
))
Enter fullscreen mode Exit fullscreen mode

With the implementation above, Test checks of Jest test is fully integrated into the gulp build workflow.

Too long did not read:
1) Install jest-cli in your project.

yarn add jest-cli
Enter fullscreen mode Exit fullscreen mode

2) Use jest-cli to run your Jest tests programmatically. A sample code is shown below plus the returned result.

const jest = require('jest-cli');
jest.runCLI({json: false},['project directory'])
    .then((testResults) => console.log(testResults))
Enter fullscreen mode Exit fullscreen mode

3) Use the result from the jest-cli to customise your gulp workflow. check a sample of how it's done here

Comments 5 total

  • Ctibor Laky
    Ctibor LakyMay 19, 2022

    Please update from jest-cli to @jest/core. Other seems to be the same, thanks :)

    npm i jest-cli
    yarn add jest-cli
    
    require('jest-cli');
    
    Enter fullscreen mode Exit fullscreen mode

    to

    npm i @jest/core
    yarn add @jest/core
    
    const jest = require('@jest/core');
    
    Enter fullscreen mode Exit fullscreen mode
    • Darasimi-Ajewole
      Darasimi-AjewoleMay 22, 2022

      @luckylooke , according to the package's npm page, @jest/core appears to still be under development.
      Would you still suggest I make the change ?

      • Ctibor Laky
        Ctibor LakyJun 5, 2022

        I didn’t notice.. but for some reason (I don't remember yet), using @jest/core was solution in my environment 🤷‍♂️

        But I suggest not to change article in a previously provided way, but you can mention it, or just leave it for those who will struggle, they might check this discussion 😊

        Thanks 🙏

        • Darasimi-Ajewole
          Darasimi-AjewoleJun 9, 2022

          In my article, I mentioned that the guide will certainly works for jest-cli <= 24.9.0 and might not work for newer version.

          Please can you share your version of jest-cli, since it's most likely newer, and I would modify the article to reflect any additional steps needed.

          Thanks in advance:)

Add comment