如何用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须要短短几个步骤。一旦完成这些设置，您能够实现不少您想实现的事情。
但愿本文能帮助到您！

看以后

点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）
关注公众号「新前端社区」，享受文章首发体验！
每周重点攻克一个前端技术难点。