Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2395

Abstract

ed by well-known software companies (Google, Facebook, and Microsoft), which means that the tools won’t run out of life soon.</p><p id="4faa">At the end of this post, we should have a project that can reliably run tests or automatable tasks, written in TypeScript in a Chromium browser.</p><figure id="c05f"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*pp__DLIWph0k9Cx9NPs71A.png"><figcaption></figcaption></figure><h1 id="58b8">How To Setup Jest, Puppeteer, and TypeScript</h1><ol><li>Install <a href="https://www.npmjs.com/package/typescript"><code>TypeScr</code>ipt</a>.</li><li>Create a <a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html"><code>tsconfig.j</code>son</a> file (TypeScript can do this for you).</li><li>Install <a href="https://www.npmjs.com/package/jest"><code>J</code>est</a> and its typings <a href="https://www.npmjs.com/package/@types/jest"><code>@types/j</code>est</a>.</li><li>Install <a href="https://www.npmjs.com/package/puppeteer"><code>Puppet</code>eer</a> and its typings <a href="https://www.npmjs.com/package/@types/puppeteer"><code>@types/puppet</code>eer</a>. This will download a version of Chromium. If you already have Chrome and you don’t need to download it, you can use <a href="https://www.npmjs.com/package/puppeteer-core"><code>puppeteer-c</code>ore</a>.</li><li>Install the <a href="https://www.npmjs.com/package/jest-puppeteer"><code>jest-puppet</code>eer</a> preset. This makes things easier for you as it greatly reduces the setup.</li><li>Install <a href="https://www.npmjs.com/package/@types/jest-environment-puppeteer"><code>@types/jest-environment-puppet</code>eer</a> to have proper TypeScript support in your tests.</li><li>Create a <a href="https://jestjs.io/docs/en/configuration"><code>jest.config</code>.js</a>. It should use the <code>jest-puppeteer</code> preset.</li><li>Create a <code>jest-puppeteer.config.js</code>. You can use this file to set custom Chrome options (e.g. to run in non-headless mode).</li><li>Create your tests. API or end-to-end tests should be put into a dedicated tests directory and have either the word <code>spec</code> or <code>test</code> in their filename. If your tests are not found, you can customize <a href="https://jestjs.io/docs/en/configuration#testmatch-array-string"><code>testMa</code>tch</a> in <code>jest.config.js</code>.</li><li>Run the tests: <c

Options

ode>jest --runInBand</code>. <a href="https://jestjs.io/docs/en/cli#runinband"><code>runInB</code>and</a> will disable parallel test execution which can be practical for running API or end-to-end tests.</li><li>Optional: If you need to perform tasks before or after all your tests are started, you can make use of Jest <a href="https://jestjs.io/docs/en/configuration#globalsetup-string"><code>globalSe</code>tup</a> / <a href="https://jestjs.io/docs/en/configuration#globalteardown-string"><code>globalTeard</code>own</a>. If you do, you need to call the <code>globalSetup</code> / <code>globalTeardown</code>, done by <code>jest-puppeteer</code>, yourself (e.g. close the browser when the tests are finished).</li></ol> <figure id="8f71"> <div> <div>

            <iframe class="gist-iframe" src="/gist/ali-kamalizade/03c4b3076266fc9c2183c667cf83d9a8.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure>
    <figure id="6cac">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/ali-kamalizade/d6d231c73ae45f41e8425c433d8ea3b6.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure>
    <figure id="906f">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/ali-kamalizade/26b53346f2175259acd8160419aa792f.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure>
    <figure id="7858">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/ali-kamalizade/81190d44d21b8000caeb64e6696620ab.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h1 id="e69f">Conclusion</h1><p id="4bd8">Thanks for making it this far. As you can see, there are a few steps required to connect Jest, Puppeteer, and TypeScript. Once the setup is done, you can achieve a lot, though.</p><p id="1b10">Thanks for reading!</p></article></body>

How To Use Puppeteer With Jest & TypeScript

Automate and test everything in Chrome

End-to-end tests often use Selenium, which can be used to automate tasks.

However, you may not need the weight and the feature-set of Selenium. If you are looking for a more lightweight and easy-to-use tool for automating tasks or running end-to-end tests, Puppeteer is a good choice.

In this post, we will use:

Puppeteer: A Node library to control and automate Chromium-based browsers (e.g. Google Chrome), which can be used in continuous integration tools such as GitLab and Jenkins. I’ve written a previous article about Puppeteer for end-to-end testing.
Jest: A spectacular test runner for writing and executing tests written in JavaScript or TypeScript. It plays well with Node.js and popular front-end frameworks, such as Angular and React. I’ve written about Jest with Angular in a previous article.
TypeScript: A superset of JavaScript which adds static typing as well as other nice features. Popular IDEs like IntelliJ and Visual Studio Code have great support for TypeScript which improves the developer experience.

All of those libraries are popular open-source projects, maintained by well-known software companies (Google, Facebook, and Microsoft), which means that the tools won’t run out of life soon.

At the end of this post, we should have a project that can reliably run tests or automatable tasks, written in TypeScript in a Chromium browser.

How To Setup Jest, Puppeteer, and TypeScript

Install TypeScript.
Create a tsconfig.json file (TypeScript can do this for you).
Install Jest and its typings @types/jest.
Install Puppeteer and its typings @types/puppeteer. This will download a version of Chromium. If you already have Chrome and you don’t need to download it, you can use puppeteer-core.
Install the jest-puppeteer preset. This makes things easier for you as it greatly reduces the setup.
Install @types/jest-environment-puppeteer to have proper TypeScript support in your tests.
Create a jest.config.js. It should use the jest-puppeteer preset.
Create a jest-puppeteer.config.js. You can use this file to set custom Chrome options (e.g. to run in non-headless mode).
Create your tests. API or end-to-end tests should be put into a dedicated tests directory and have either the word spec or test in their filename. If your tests are not found, you can customize testMatch in jest.config.js.
Run the tests: jest --runInBand. runInBand will disable parallel test execution which can be practical for running API or end-to-end tests.
Optional: If you need to perform tasks before or after all your tests are started, you can make use of Jest globalSetup / globalTeardown. If you do, you need to call the globalSetup / globalTeardown, done by jest-puppeteer, yourself (e.g. close the browser when the tests are finished).

Conclusion

Thanks for making it this far. As you can see, there are a few steps required to connect Jest, Puppeteer, and TypeScript. Once the setup is done, you can achieve a lot, though.

Thanks for reading!