如何用Jest和TypeScript調用Puppeteer庫

客戶端測試一般使用Selenium，它可自動執測試行任務。
可是，您可能不須要Seleniumna那種重量級的或者那麼多功能的框架。若是您正在尋找一種更輕巧，易於使用的工具來自動執行任務或運行端到端測試，Puppeteer是一個不錯的選擇。
本文中咱們將使用：

• Puppeteer 用於控制和自動化基於Chromium 的瀏覽器的庫，可用於GitLab和Jenkins等持續集成的工具。我以前寫過一篇關於Puppeteer進行端到端測試的文章。
• Jest 一個很好的測試運行工具，用於編寫執行用JavaScript或Typescript編寫的測試。它與Node.js和流行的前端框架（vue和react）配合的很好。
• TypeScript JavaScript的超集，它增長了靜態類型以及其餘不錯的功能。InterlliJ和vscode等流行的IDE 對TypeScript提供了很好的支持，從而改善了開發人員的體驗。

全部這些庫都是流行的開源項目，由著名的軟件公司（谷歌，Facebook和微軟）維護，這意味着這些工具不會很快消亡。 在這篇文章的最後，咱們應該有一個能夠可靠地運行測試或自動化任務的項目，用Chromium瀏覽器中的TypeScript編寫。

如何配置Jest，Puppeteer和TypeScript

• 安裝TypeScript。
• 建立一個tsconfig.json文件（TypeScript能夠爲您完成此操做）。
• 安裝Jest及其打字@types/jest。
• 安裝Puppeteer及其輸入@types/puppeteer。這將下載Chromium的一個版本。若是您已經安裝了Chrome並且無需下載，則能夠使用puppeteer-core。
• 安裝jest-puppeteer預設。這使你的工做更輕鬆，由於它大大減小了配置。
• 建立一個jest.config.js。它應該使用jest-puppeteer預設。
• 建立一個jest-puppeteer.config.js。您能夠使用此文件設置自定義Chrome選項（例如，以非無頭模式運行）。
• 建立測試。應將API或端到端測試放入專用測試目錄中，並在文件名中包含單詞spec或文字test。若是不能找到你的測試，您能夠自定義testMatch在jest.config.js。
• 運行測試：jest --runInBand。runInBand將禁用並行測試執行，這對於運行API或端到端測試很是實用。
• 可選：若是您須要在全部測試開始以前或以後執行任務，則能夠使用Jest globalSetup/ globalTeardown。若是這樣作，您須要本身調用globalSetup/ globalTeardown，完成調用jest-puppeteer（例如，在測試完成後關閉瀏覽器）。

module.exports = {
    preset: 'jest-puppeteer',
    testMatch: ["**/?(*.)+(spec|test).[t]s"],
    testPathIgnorePatterns: ['/node_modules/', 'dist'], // 
    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
    transform: {
        "^.+\\.ts?$": "ts-jest"
    },
    globalSetup: './jest.global-setup.ts', // will be called once before all tests are executed
    globalTeardown: './jest.global-teardown.ts' // will be called once after all tests are executed
};

import "expect-puppeteer";

module.exports = {
    launch: {
        dumpio: true,
        headless: false,
        args: ['--disable-infobars'],
    },
    browserContext: 'default'
};

const { setup: setupPuppeteer } = require('jest-environment-puppeteer');
/**
 * Sets up the environment for running tests with Jest
 */
module.exports = async function globalSetup(globalConfig) {
    // do stuff which needs to be done before all tests are executed
    await setupPuppeteer(globalConfig);
};

結論

感謝你作將這篇文章讀完。正如您所見，鏈接Jest，Puppeteer和TypeScript須要短短几個步驟。一旦完成這些設置，您能夠實現不少您想實現的事情。
但願本文能幫助到您！

看以後

點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）
關注公衆號「新前端社區」，享受文章首發體驗！
每週重點攻克一個前端技術難點。