jesthandbook.com/index.html at master · HugoDF/jesthandbook.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="The Jest Handbook - Learn Advanced JavaScript Testing patterns with Jest." />
  <title>The Jest Handbook - Learn Advanced JavaScript Testing patterns with Jest.</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.x.x/dist/tailwind.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.2.x/dist/typography.min.css" />
  <style>
    .cp-button {
      background: #26A8ED;
      color: white !important;
      text-decoration: none !important;
      text-align: center !important;
    }

    .object-some-left {
      object-position: 20%;
    }
  </style>
</head>

<body>
  <div class="prose mx-auto px-6 py-6">
    <h2>The Jest Handbook</h2>
    <p style="margin-bottom: 0;">Learn Advanced JavaScript Testing patterns with Jest. Get testing superpowers by
      leveraging underused Jest features.</p>
    <div>
      <div style="min-height: 370px;" class="hidden sm:block" id="img-large"></div>
      <div style="max-height: 300px;" class="sm:hidden" id="img-small"></div>
    </div>
    <script>
      (function () {
        let lastImgInjection = null;

        function image(width) {
          if (width > 640) {
            if (lastImgInjection === 'large') return;
            lastImgInjection = 'large';
            document.querySelector('#img-large').innerHTML = `
              <picture
                style="min-height: 370px; margin: 0;"
                class="hidden sm:block object-cover object-some-left"
              >
                <source srcset="./jest-handbook-3d-3-device.webp" type="image/webp">
                <source srcset="./jest-handbook-3d-3-device.png" type="image/png">
                <img
                  style="min-height: 370px; margin: 0;"
                  height="370"
                  width="100%"
                  class="hidden sm:block object-cover object-some-left"
                  src="./jest-handbook-3d-3-device.png"
                  alt="The Jest Handbook Cover"
                />
              </picture>`;
          } else {
            if (lastImgInjection === 'small') return;
            lastImgInjection = 'small';
            document.querySelector('#img-small').innerHTML = `
              <picture
                style="height: 300px; margin: 0;"
                class="md:hidden object-cover object-some-left""
              >
                <source srcset="./jest-handbook-3d-2-book.webp" type="image/webp">
                <source srcset="./jest-handbook-3d-2-book.png" type="image/png">
                <img
                  height="300"
                  width="100%"
                  style="height: 300px; margin: 0;"
                  class="md:hidden object-cover object-some-left"
                  src="./jest-handbook-3d-2-book.png"
                  alt="The Jest Handbook Cover"
                />
              </picture>`;
          }
        }
        document.addEventListener('DOMContentLoaded', function () {
          image(window.innerWidth)
        });
        window.addEventListener('resize', () => {
          image(window.innerWidth);
        }, { passive: true });
      })()
    </script>
    <a class="cp-button w-full md:w-1/2 md:mx-auto block rounded hover:bg-blue-400 text-white py-4 font-bold"
      href="https://checkoutpage.co/checkout/hugo/jest-handbook">I want this</a>
    <h3 id="who-is-this-for">Who is this for?</h3>
    <p>You're a JavaScript developer who wants to learn unit testing?</p>
    <p>You come from a non-JS background and want to apply your existing unit testing knowledge in JavaScript?</p>
    <p>You're proficient at testing in JavaScript and would like to learn Jest best-practices and featureset?</p>
    <p>The Jest Handbook is for you.</p>
    <h3 id="learning-outcomes">Learning outcomes</h3>
    <ol>
      <li>Gain a deep understanding of the options available to the Jest CLI and how to use different views to write and
        debug tests more effectively.</li>
      <li>Leverage spying, stubbing and module import interception functionality in tests and create mock JavaScript
        object instances, stub ES6 classes and mock out global objects.</li>
      <li>Use and contrast 2 approaches to testing backend applications with Jest as well as illustrate synchronous and
        asynchronous testing patterns.</li>
      <li>Employ advanced Jest partial matchers to write tests with high specificity and reduce toil when updating
        application code.</li>
      <li>Leverage Jest's built-in coverage tool to set minimum coverage thresholds, find parts of the code that aren't
        tested and how to disable it in specific cases.</li>
    </ol>
    <h3 id="table-of-contents">Table of Contents</h3>
    <ol>
      <li>
        <p>Jest/Jest CLI expert - Debugging tests</p>
        <ul>
          <li>run jest tests sequentially why/how</li>
          <li>run single file/folder</li>
          <li>run single test</li>
          <li>interactive watch mode (filtering by file name, failing tests, test filename regex)</li>
          <li>running in CI mode</li>
        </ul>
      </li>
      <li>
        <p>Spying, stubbing - become a stub/mock function assertion pro</p>
        <ul>
          <li>mock assertion reference</li>
          <li>set, clear, reset mocks and spies</li>
          <li>example: mocking the current date (how to mock a global object/class) -&gt; 4 examples</li>
          <li>stub ES6 class &quot;extends&quot;</li>
          <li>master Object.defineProperty to create mock JavaScript application object instances</li>
          <li>Mocking of CommonJS and ES6 imports</li>
        </ul>
      </li>
      <li>
        <p>Testing synchronous vs asynchronous code</p>
        <ul>
          <li><code>test('a', async () =&gt; { await codeUnderTest() })</code></li>
          <li>Testing for asynchronous throws (<code>return expect().rejects</code>)</li>
          <li>mocking output of synchronous and asynchronous functions</li>
          <li>failing a test programmatically <code>fail()</code>, <code>throw 'foo'</code></li>
        </ul>
      </li>
      <li>
        <p>Partial matches</p>
        <ul>
          <li>objectContaining</li>
          <li>arrayContaining</li>
          <li>nested arrayContaining, objectContaining</li>
          <li>assert over only some of the parameters <code>expect.anything()</code></li>
          <li><code>expect.any(Function)</code> etc.</li>
        </ul>
      </li>
      <li>
        <p>Philosophies to write unit tests for Express.js</p>
        <ul>
          <li>mock request/response objects in-memory</li>
          <li>leverage supertest</li>
        </ul>
      </li>
      <li>
        <p>Coverage in Jest</p>
        <ul>
          <li>coverage thresholds</li>
          <li>using Jest coverage reports to find code that's not being exercised</li>
          <li>exclude a line, file or statement from coverage reports</li>
        </ul>
      </li>
    </ol>
    <blockquote>
      <p>Interested in upgrading your Jest and testing game?</p>
    </blockquote>
    <a href="https://checkoutpage.co/checkout/hugo/jest-handbook"
      class="cp-button rounded hover:bg-blue-400 text-white px-6 py-4 mx-auto block font-bold">Get the Jest Handbook
      (100 pages)
      now</a>
    <h3 id="why-jest-a-note-from-the-author">Why Jest? A note from the author</h3>
    <p>Jest is the most widespread solution to test JavaScript applications. Jest is a modern, batteries-included
      testing
      framework that comes with all features you need to set up for your JavaScript tests including coverage,
      interactive
      watch mode, advanced matchers.</p>
    <p>Jest is the leading test framework in terms of downloads as of 2020 as per <a
        href="https://www.npmtrends.com/jest-vs-mocha-vs-ava-vs-jasmine-vs-qunit-vs-chai">npmtrends Jest vs Mocha vs AVA
        vs Jasmine vs QUnit vs Chai</a>. Jest came out of efforts from Facebook. It's is used at a plethora of small and
      large companies including Facebook, AirBnB, The New York Times and Spotify.</p>
    <p>
      <picture>
        <source srcset="./jest-vs-other.webp" type="image/webp">
        <img src="./jest-vs-other.jpg"
          alt="2 year trends (November 2019) for Jest vs Mocha, AVA, Jasmine, QUnit and Chai">
      </picture>
    </p>
    <p>I've looked around the web for resources dedicated to teaching you the ins and outs of Jest. The vast majority of
      solutions are GitHub issues or StackOverflow posts, and there are a few React/Vue.js (framework specific) testing
      books out there. None really focus on Jest itself and how it can be leveraged to write better tests, faster.</p>
    <p>The Jest Handbook is an example and solutions-driven book that will teach you in the ins and outs of testing
      JavaScript applications with Jest.</p>
    <h3 id="about-the-author" class="flex items-center">
      <picture class="h-16 w-16 rounded inline-block">
        <source srcset="./hugo-x100.webp" type="image/webp">
        <source srcset="./hugo-x100.jpg" type="image/jpeg">
        <img style="margin: 0" class="rounded" src="./hugo-x100.jpg" alt="Hugo Di Francesco">
      </picture>
      About the Author
    </h3>
    <p>Hugo Di Francesco is a co-author of &quot;Professional JavaScript&quot; with Packt. He runs the Code with Hugo
      website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University
      College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies
      such as Canon and Elsevier.</p>
    <p>Hugo has also written some of the top articles on the internet about Jest at <a
        href="https://codewithhugo.com/tags/jest/">codewithhugo.com/tags/jest/</a> including:</p>
    <ul>
      <li><a href="https://codewithhugo.com/express-request-response-mocking/">A testing guide for Express with request
          and response mocking/stubbing using Jest</a></li>
      <li><a href="https://codewithhugo.com/run-skip-single-jest-test/">How to run, ignore or skip Jest tests, suites
          and
          files</a></li>
      <li><a href="https://codewithhugo.com/jest-mock-spy-module-import/">Jest Full and Partial Mock/Spy of CommonJS and
          ES6 Module Imports</a></li>
      <li><a href="https://codewithhugo.com/mocking-the-current-date-in-jest-tests/">Mocking/stubbing the current Date
          in
          Jest tests</a></li>
      <li><a href="https://codewithhugo.com/jest-fn-spyon-stub-mock/">Jest .fn() and .spyOn() spy/stub/mock assertion
          reference</a></li>
      <li><a href="https://codewithhugo.com/jest-exclude-coverage/">Jest ignore or exclude file/function/statement from
          test coverage</a></li>
    </ul>
    <a href="https://checkoutpage.co/checkout/hugo/jest-handbook"
      class="cp-button rounded hover:bg-blue-400 text-white my-10 mt-12 px-6 py-4 mx-auto block font-bold"
      data-seller="hugo" data-checkout="jest-handbook">Get The Jest Handbook now</a>
  </div>

  <script async defer src="https://cdn.simpleanalytics.io/hello.js"></script>
  <noscript><img src="https://api.simpleanalytics.io/hello.gif" alt=""></noscript>
</body>

</html>