Yet Another Test Runner?

Me (Ran Yitzhaki)

Oliver

@ranyitz

@ranyitz

How many devs use Jest?

The Front-End Tooling Survey - 2018 (JavaScript Testing)

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

The Front-End Tooling Survey - 2019 (JavaScript Testing)

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results

State of JS - Usage by Testing Framework

https://2020.stateofjs.com/en-US/technologies/testing/

Jest

Mocha

Jasmine

What Makes Testing with Jest Delightful?

Performance

Jest parallelizes test runs across workers to maximize performance

Ok, so it's 🔥 Blazing fast

e2e tests in parallel

Isolation, state & parallel tests run

Sandboxing

Sandboxed test files and automatic global state resets for every test so no two tests conflict with each other

TestEnvironment is sandboxed. Each test suite will trigger setup/teardown in their own TestEnvironment.

Interactive & smart

Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly

https://github.com/facebook/jest/blob/master/packages/jest-cli/src/TestSequencer.js

https://github.com/facebook/jest/blob/master/packages/jest-test-sequencer/src/index.ts#L69-L85

Runs slow tests first

Runs failing tests first

Immersive watch mode

Run tests related to changed files & "only failed tests" mode

.only

Batteries included

  • Assertion Library

  • Mocking Library

  • Coverage Reports

  • Snapshot Testing

No need for additional tools, a complete testing solution

Assertion Library



    // bar.js
    const npmInstall = require('../npm-install');        
    const result = npmInstall(); // some heavy work ...
    console.log(result); // true


    ///////////////////////////////////////////////////

    // bar.spec.js
    jest.mock('../npm-install');
    const npmInstallMock = require('../npm-install');
    npmInstallMock.mockImplementation(() => true);

Mocking Modules

Coverage Reports

  • Error messages

  • logs

  • API response

  • complex objects

  • UI

Snapshot testing

  1. expect(value).toMatchSnapshot()
  2. A snapshot is written in the file system
  3. Make a change in the production code
  4. Tests are failing
  5. Update the snapshot to the new `value` (u)
  6. New snapshot is written to the file system
  7. Tests are passing

Testing your React components

  • Running Suites In parallel

  • Isolation Between test files

  • Tuned To Give Fast Feedback

  • Immersive Watch Mode

  • Beautiful diffs

  • Informative error messages

  • Assertion Library

  • Mocking Library

  • Coverage Reports

  • Snapshot Testing

Ok, I'll use it in my next project

But what if I want to use it in my current project?

Jest codemods

Currently Supported

Questions

Made with Slides.com