Jest and built-in Vim features

jest-and-vim.md

Jest and built-in Vim features

Set up a sandbox

$ cd /tmp
$ mkdir jest-and-vim
$ cd $_
$ npm init -y
$ npm install --save-dev jest

Test around

Let's add some silly tests to index.test.js:

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

test('multiplies 1 * 2 to equal 3', () => {
  expect(1 * 2).toBe(3);
});

write the file and run jest:

:!npx jest

 FAIL  ./index.test.js
  ✓ adds 1 + 2 to equal 3 (3 ms)
  ✕ multiplies 1 * 2 to equal 3 (3 ms)

  ● multiplies 1 * 2 to equal 3

    expect(received).toBe(expected) // Object.is equality

    Expected: 3
    Received: 2

      4 | 
      5 | test('multiplies 1 * 2 to equal 3', () => {
    > 6 |   expect(1 * 2).toBe(3);
        |                 ^
      7 | });
      8 | 

      at Object.test (index.test.js:6:17)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        1.013 s
Ran all test suites.

This is pretty nice but we may want to make it fit better in our Vim workflow. Having the failed tests listed in the quickfix window, for example, would be a nice touch, but how to get a quickfix list out of that?

Simplify output

The default output of Jest is very pretty and informative but not exactly CI and CLI-friendly. richchurcher/jest-simple-reporter is an alternative reporter that outputs results in a friendlier, Unix-like, way.

Let's install it:

$ npm install --save-dev jest-simple-reporter

tell Jest to use our simple reporter by default:

"jest": {
  "reporters": [
    "jest-simple-reporter"
  ]
}

and run the test again:

:!npx jest

/tmp/jest-and-vim/index.test.js:::I::adds 1 + 2 to equal 3
/tmp/jest-and-vim/index.test.js:6:1:E:Expected: 3 Received: 2 

This is much simpler, and easier to parse for the quickfix list.

Make errors and fix them quickly

First, let's tell Vim to run our tests with Jest:

:setlocal makeprg=npx\ jest

and see what we have:

:make
(3 sur 3) : E:Expected: 3 Received: 2
:cwindow
||
|| /private/tmp/jest-and-vim/index.test.js:::I::adds 1 + 2 to equal 3
index.test.js|6 col 1| E:Expected: 3 Received: 2

OK, the good:

• only failing tests are considered as valid errors

and the bad:

• the quickfix list is noisy,
• the non-errors pollute :cc, :cnext and friends,
• the "Error" type, E, is not handled properly.

Fortunately, the author of jest-simple-reporter gives what we need to build a proper &errorformat:

'errorformat':
    \ '%f:%l:%c:%t:%m,' .
    \ '%-G%.%#'

which we can use like this:

:set errorformat^=%f:%l:%c:%t:%m,%-G%.%#

Translation:

• %f matches a filename,
• : matches a colon,
• %l matches a line number,
• %c matches a column,
• %t matches an error type (Vim recognises E for "error"),
• %f matches a message,
• ,%-G%.%# is here to get rid of the non-matching lines.

Let's try it:

:make
(1 sur 1) error : Expected: 3 Received: 2
:cwindow
index.test.js|6 col 1 error| Expected: 3 Received: 2

Nice! We got rid of all the bad stuff. Now is the time to create a minimal compiler scrit compiler/jest.vim:

if exists("current_compiler")
  finish
endif
let current_compiler = "jest"

CompilerSet makeprg=npx\ jest
CompilerSet errorformat=%f:%l:%c:%t:%m,%-G%.%#

and call it with:

:compiler jest

so that we can do:

:make

to run all test files or:

:make %

to run the current test file.

What if…

We could run the current test file on write?

We could run the current test with the press of a button?