如何用Jest和TypeScript调用Puppeteer库

客户端测试通常使用Selenium，它可自动执测试行任务。  

但是，您可能不需要Selenium那种重量级的或者那么多功能的框架。如果您正在寻找一种更轻巧，易于使用的工具来自动执行任务或运行端到端测试，Puppeteer是一个不错的选择。  

本文中我们将使用：  

1. Puppeteer 用于控制和自动化基于Chromium 的浏览器的库，可用于GitLab和Jenkins等持续集成的工具。我之前写过一篇关于Puppeteer进行端到端测试的文章。

2. Jest 一个很好的测试运行工具，用于编写执行用JavaScript或Typescript编写的测试。它与Node.js和流行的前端框架（vue和react）配合的很好。

3. 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: ['/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需要短短几个步骤。一旦完成这些设置，您可以实现很多您想实现的事情。

希望本文能帮助到您！  

看之后  

点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）  

关注公众号「新前端社区」，享受文章首发体验！  

每周重点攻克一个前端技术难点。