Jest Testing Patterns

PASS

src/Presentation.spec.js

slides render well (20ms)

✔

attending DevTalks Bucharest (5ms)

✔

attendees are amazing! (2ms)

✔

Liran Tal

github.com/lirantal

@liran_tal

describe('agenda', () => {

})

test('the promise of jest?', () => {})

test('jest lifecycle', () => {})

beforeAll('about me', () => {})

Liran Tal

Engineering Manager @ Nielsen

// NodeGoat Core Team

// Node.js Security WG

// Cluj JavaScript Community

The Role of Testing

why do we test?

to be cool

my manager told me I have to

to make sure the code works

to document my code

src: https://www.youtube.com/watch?v=WpkDN78P884&t=3593s

to enable refactoring

should we always write tests?

The Testing Pyramid

src: https://github.com/jest-community/jest-extended

Slow

Cost

What is Jest ?

Test Framework

Test Runner

Assertions

Coverage

Test Doubles

Platform

Watch Mode

reasons to love Jest

The Test Framework

blazing fast

optimizations

extensible framework

codemods

zero

configuration

reasons to love Jest

chai

should.js

sinon

proxyquire

istanbul

nyc

zero-configuration testing

#0CJS

testdouble

The Test Framework

extensible framework

codemods

zero

configuration

reasons to love Jest

PASS

blazing fast

optimizations

Blazing Fast

Parallelize Workers

Blazing Fast

Optimizations

Slow Tests First

Sandboxing

Blazing Fast

Optimizations

Transformed Files Caching

Blazing Fast

Optimizations

Fast Like Ava.js,

Sane Like The Rest

?

PizzaService.test.js

WineService.test.js

test('peproni')

test('anchovy')

test('barolo')

test('dolcetto')

Fast Like Ava.js,

Sane Like The Rest

speed is not everything

pitfall #1

Fast Like Ava.js,

Sane Like The Rest

Fast Like Ava.js,

Sane Like The Rest

Fast Like Ava.js,

Sane Like The Rest

abstractions for the masses

Fast Like Ava.js,

Sane Like The Rest

speed is not everything

pitfall #2

Fast Like Ava.js,

Sane Like The Rest

The Test Framework

extensible framework

codemods

zero

configuration

reasons to love Jest

PASS

blazing fast

optimizations

matchers

extensible framework

src: https://github.com/jest-community/jest-extended

matchers

extensible framework

src: https://github.com/jest-community/jest-extended

extensible framework

want more matchers?

additional jest matchers

extensible framework

src: https://github.com/jest-community/jest-extended

extensible framework

want more matchers?

extensible framework

hidden matchers gem!

extensible framework

expect.any(type)

extensible framework

asymmetricMatch

extensible framework

expect.any(type)

extensible framework

expect.any(type)

The Test Framework

extensible framework

codemods

zero

configuration

reasons to love Jest

PASS

blazing fast

optimizations

codemods

ava.js

mocha

tape

expect

chai

should.js

codemods

The Test Framework

extensible framework

codemods

zero

configuration

reasons to love Jest

PASS

blazing fast

optimizations

Developer Experience

reasons to love Jest

Developer Experience

visual diff and effective verbosity

relaxed

conventions

immersive

watch mode

the logo...

reasons to love Jest

logo

Developer Experience

visual diff and effective verbosity

relaxed

conventions

immersive

watch mode

the logo...

reasons to love Jest

PASS

Verbose Errors

StaticRobert.test.js

tape

jest

Verbose Diffs

StaticRobert.test.js

tape

jest

StaticRobert.js

StaticRobert.test.js

tape

jest

Developer Experience

visual diff and effective verbosity

relaxed

conventions

immersive

watch mode

the logo...

reasons to love Jest

PASS

relaxed conventions

It's The Little Things

That Matter most

relaxed conventions

Friendly CLI

relaxed conventions

A BDD Style

Jasmine is a BDD Test Framework

describe('piazza del ecmascripta', () => {

test('mushrooms should be tasty', () => {})

})

test('peperoni should'nt throw exc', () => {})

it('del icecream', () => {})

fit('del icecream', () => {})

it.only('del icecream', () => {})

src: packages/jest-jasmine2/src/index.js

relaxed conventions

File Naming Conventions?

tests/

file.test.js

file.spec.js

Developer Experience

visual diff and effective verbosity

relaxed

conventions

immersive

watch mode

the logo...

reasons to love Jest

PASS

immersive watch mode

What the Jest team think it means

immersive watch mode

What the Mocha team think about it

immersive watch mode

What my colleagues think it means

immersive watch mode

What it really is

immersive watch mode

console.log buffer

immersive watch mode

a pitfall of debugging tests

immersive watch mode

Developer Experience

visual diff and effective verbosity

relaxed

conventions

immersive

watch mode

the logo...

reasons to love Jest

PASS

Jest Testing Lifecycle

The Test Suite Structure

The Test Suite Scoping

The Test Runner

describe('a test suite', () => {

})

test('a test case', () => {})

🤷‍♀️ test() or it() can not be nested

🤷‍♀️ all() and each() can not be nested either

Jest Testing Lifecycle

The Test Suite Structure

The Test Suite Scoping

The Test Runner

PASS

Jest Testing Lifecycle

The Test Suite Structure

The Test Suite Scoping

The Test Runner

PASS

(jest-runtime)

Setup Globals

Tearup

Run Tests

Cache

Teardown

(jest-cli)

Setup global variables accessible to each test

{


  "jest": {
    "globals": {
      "__DEV__": true
    }
  }

(jest-runner)

(test_sequencer)

(jest-cli)

Async one-time setup before tests are executed

{


  "jest": {
    "globalSetup": “<rootDir>/testTearup.js”
  }

Parallel or Serial execution of all test files

{

  
  "jest": {
    "setupFiles": [“<rootDir>/setupFile.js”]
  }

Worker Setup

Worker 1

Worker 2

setupFile

File1

setupFile

File2

Cache Test Run Performance

{

Async one-time Cleanup function


 "jest": {
    "globalTeardown": “<rootDir>/testTeardown.js”
  }

Jest Testing Lifecycle

The Test Suite Structure

The Test Suite Scoping

The Test Runner

PASS

🤷‍♀️ test files resolving is not predictable

--runInBand also

Async Testing

Async Gotchas

Expecting Promises

Async/Await Gotchas

When Errors Go Lost

Async Gotchas

DOs and DONTs for Assertion Planning

Your Tests are Synchronous

You are Using Promises

You are Using Async/Await with Catch Block

Your Test Has Conditionals

Your Test Has Callbacks with Expectations

npm install --dev jest

Give Jest a Try

And maybe
you'll fall in love too

😍

multumesc 🤗

PASS

src/Presentation.spec.js

Test Suites: 1 passed, 1 total

Tests: 3 passed, 3 total

Liran Tal

github.com/lirantal

twitter.com/liran_tal

2018 - Bucharest - Jest Testing Patterns

By Liran Tal

2018 - Bucharest - Jest Testing Patterns

Test doubles? Assertions? Code coverage? Jest has it all! There are many testing frameworks and test utilities in the JavaScript ecosystem, but jest is the one which is quickly becoming a favorite for many developers. The talk will introduce jest as a testing framework, the reasons why developers love it, and explore its hidden features, testing patterns, and Jest's extensions ecosystem.

2,152

Liran Tal

💚@nodejs Security WG member | Core team @meanjs, #dockly | Author: 📘Essential Node.js Security ✨ Engineering Manager @nielsen-oss | ❤️#opensource #javascript