<meta charset="utf-8">

<title>Jest Guide</title>

<!--[if lt IE 9]>

<link rel="stylesheet" href="basic.css">

<a href="/">gowind.github.io</a>

<h1 class="title">Jest Guide</h1>

<p>some notes I took when trying to understand the <code>jest</code>

library for unit testing in js/ts</p>

<p><code>Expectation</code> objects - <code>expect(X)</code>

<code>Matchers</code> - <code>.toBe(Y)</code>, <code>.toEqual(Z)</code>

etc</p>

<p>ExpectationObject.Matchers - pattern for testing.</p>

<p><code>test("Test description", func() {}</code> - how to write

tests</p>

<pre><code>test(&quot;Testing async functions&quot;, async () =&gt; {

y = await some_async_func();

expect(y).toBe(z);

}</code></pre>

<p>Look up the Jest documentation on the list of available

<code>matchers</code></p>

<h3 id="setup-and-teardown.">Setup and Teardown.</h3>

<pre><code>beforeEach(() =&gt; {

initializer_fn(); // setup before each test

});

afterEach(() =&gt; {

teardown_fn(); // teardown after each test

});</code></pre>

<pre><code>beforeAll( () =&gt; {

// one time setup before running tests in this file

});

afterAll( () =&gt; {

// one time teardown after running tests in the file

});</code></pre>

describe(&quot;a block to scope tests&quot;, () =&gt; {

beforeEach(() =&gt; {

// runs only before tests in this scope

});

test(&#39;description&#39;, () =&gt; {})

})`</code></pre>

<p><code>describe</code>s can be nested.</p>

<h3 id="order-of-execution.">Order of Execution.</h3>

<ol type="1">

<li><p>Tests inside <code>describes</code> are collected first, before

they are run.</p></li>

<li><p>The tests inside <code>describe</code>s are run in the order they

were collected (top-down).</p></li>

<li><p>Top level test (outside of any describe-scope) are run in the

order they are seen (tests inside <code>describes</code> <em>before</em>

the top-level tests are run <em>after</em> the top-level test)</p></li>

<pre><code> //action.test.ts

beforeEach(() =&gt; console.log(&#39;connection setup&#39;));

beforeEach(() =&gt; console.log(&#39;database setup&#39;));

afterEach(() =&gt; console.log(&#39;database teardown&#39;));

afterEach(() =&gt; console.log(&#39;connection teardown&#39;));

describe(&quot;first scoped block&quot;, () =&gt; {

test(&#39;test inside first describe&#39;, () =&gt; {

console.log(&#39;hai i am test inside first describe&#39;);

expect(1).toBe(1);

});

});

test(&#39;test 1&#39;, () =&gt; {

console.log(&quot;hi, i am top level test&quot;);

expect(2).toBe(2);

});

describe(&#39;extra&#39;, () =&gt; {

beforeEach(() =&gt; console.log(&#39;extra database setup&#39;));

afterEach(() =&gt; console.log(&#39;extra database teardown&#39;));

test(&#39;test 2&#39;, () =&gt; console.log(&#39;test 2&#39;));

});</code></pre>

<pre><code>PASS action.test.ts

✓ test 1 (3 ms)

first scoped block

✓ test inside first describe (5 ms)

extra

✓ test 2 (6 ms)</code></pre>

<p>You can see that top-level test is run <em>before</em> tests in the

scope <code>first scoped block</code>, even though the scope comes

before the top-level test in the file.</p>

<h2 id="mocking">Mocking</h2>

<p><code>jest.fn()</code> -&gt; Mock Function, that creates an object

that can be called as a constructor, or as an object with attached

methods</p>

let k = jest.fn({create: jest.fn()});

k.create(44);

k.create(66);</code></pre>

<p><code>.mock</code> property of a <code>jest.fn</code> is where data

about how the function has been called and what the function returned is

kept. The <code>.mock</code> property also tracks the value

of <code>this</code> for each call, so it is possible to inspect this as

well.</p>

<pre><code>const myMock1 = jest.fn();

const a = new myMock1();

console.log(myMock1.mock.instances);

// &gt; [ &lt;a&gt; ]const myMock2 = jest.fn();

const b = {};

const bound = myMock2.bind(b);

bound();

console.log(myMock2.mock.contexts);

// &gt; [ &lt;b&gt; ]</code></pre>

<h3 id="mocking-a-return-value-for-a-fn">Mocking a return value for a

fn</h3>

<pre><code>const myMock = jest.fn();

myMock.mockReturnValue(66);

console.log(myMock(400, 88, &quot;hai&quot;));

// &gt; 66

console.log(myMock());

// &gt; 66</code></pre>

<h3 id="mocking-modules">Mocking Modules</h3>

<ol type="1">

<li>Import module (for references to the classes, objects or functions

within the module)</li>

<li>use <code>jest.mock('module-name')</code> , to mock all the classes,

objects or functions within the module.</li>

import axios from &#39;axios&#39;;

import Users from &#39;./users&#39;;

jest.mock(&#39;axios&#39;);

test(&#39;should fetch users&#39;, () =&gt; {

const users = [{name: &#39;Bob&#39;}];

const resp = {data: users}; axios.get.mockResolvedValue(resp);

return Users.all().then(data =&gt; expect(data).toEqual(users));});</code></pre>

<h4 id="mocking-a-module-partially">Mocking a Module partially</h4>

<ol type="1">

<li>import the exports of a module that you need.</li>

<li>Use

<code>jest.mock('module-to-be-partially-mocked', () =&gt; {}</code></li>

<li>In the <code>() =&gt; {..</code> return a module, with the exports

needed to be mocked, replaced with the mocked values</li>

<pre><code>//foo-bar-baz.js

// we want to mock `foo` in one of our tests

export const foo = &#39;foo&#39;;

export const bar = () =&gt; &#39;bar&#39;;

export default () =&gt; &#39;baz&#39;;</code></pre>

<pre><code>//test.js

import defaultExport, {bar, foo} from &#39;../foo-bar-baz&#39;;

jest.mock(&#39;../foo-bar-baz&#39;, () =&gt; {

const originalModule = jest.requireActual(&#39;../foo-bar-baz&#39;);

//Mock the default export and the named export &#39;foo&#39;

return { __esModule: true,

...originalModule,

default: jest.fn(() =&gt; &#39;mocked baz&#39;),

foo: &#39;mocked foo&#39;, }

;});

test(&#39;should do a partial mock&#39;, () =&gt; {

const defaultExportResult = defaultExport();

expect(defaultExportResult).toBe(&#39;mocked baz&#39;);

expect(defaultExport).toHaveBeenCalled();

expect(foo).toBe(&#39;mocked foo&#39;);

expect(bar()).toBe(&#39;bar&#39;);});</code></pre>

<p>You can also use it in a diff. way</p>

<pre><code>jest.mock(&#39;node-fetch&#39;);

import fetch from &#39;node-fetch&#39;;

// we obtain the original implementation for the Response class

const {Response} = jest.requireActual(&#39;node-fetch&#39;);

test(&#39;somewhere where we have to mock a fetch request&#39;, async () =&gt; {

fetch.mockReturnValue(Promise.resolve(new Response(&#39;4&#39;)));

let resp = await fetch(&quot;/some-resource&quot;);

expect(resp.text()).toBe(&#39;4&#39;);

<h3 id="open-handles">Open Handles</h3>

<p>When Jest finishes running tests, it can checks to see if there are

any events preventing the event loop from exiting. This is useful for

example, to find connection objects that aren’t closed or (maybe

unresolved Promises as well?) that might keep the loop alive. You can

detect this by using <code>jest --detectOpenHandles</code>. It has

helped me figure out connections objects that I opened and never

closed</p>