Jest + Puppeteer automatic test

Complete the project

Github.com/OldDream/co…

Why you need to do it

Did a JS small tool to release to NPM, each update will have to manually test, the efficiency is very low, sometimes even forget, if a version with a bug released, it will cheat people. So consider introducing automated tests with GitHub + Travis CI.

I choose JEST, which I am relatively familiar with, but here is different from the traditional JS single test, because this tool involves DOM operation. If the simulated JsDOM of JEST is used, it is not meaningful. Therefore, puppeteer is introduced to run a headless browser and test in it. Therefore, the local-web-server is introduced to enable the HTTP service locally.

Installation-dependent dependencies

npm i jest jest-dev-server jest-puppeteer local-web-server puppeteer regenerator-runtime  --save-dev 
Copy the code

Configuration test program

Configure the JEST environment, compatible with async/await

Create the following file in the root directory.

// setupTests.js
import 'regenerator-runtime/runtime';
Copy the code

Add jEST configuration to package.json

// package.json
"jest": {
    "setupFilesAfterEnv": [
      "./setupTests.js"]},Copy the code

Configure the local – a web server

Just add a line to scripts and use NPM Run Server to start.

// package.json
"scripts": {
    "server": "ws -p 3000 --static.index demo.html",},Copy the code

Connect local-web-server to Jest

This requires the use of jest-dev-server

Create it in the test folder in the root directory

// globalsetup.js, which is used to start the local service
module.exports = async function globalSetup() {
  await setupDevServer({
    command: `npm run server`.launchTimeout: 2000.port: 3000})},Copy the code

// GlobaltearDown.js is used to stop local services
const { teardown: teardownDevServer } = require('jest-dev-server')

module.exports = async function globalTeardown() {
  await teardownDevServer()
  console.log("Local dev server has been stopped.");
}
Copy the code

Introduce related functions in the JEST configuration file in the Test folder

// test.js jest configuration file

const startServer = require('./globalSetup');
const stopServer = require('./globalTeardown');

beforeAll(async() = > {await startServer(); // Start the local service
});
afterAll(async() = > {await stopServer(); // Stop the local server
});
Copy the code

This allows us to access http://127.0.0.1:3000 during jEST testing.

Configuration puppeteer

Continue to add the code to start puppeteer in test.js:

// test.js jest configuration file
const puppeteer = require('puppeteer');

let browser; // Browser instance
let page; // Page instance
beforeAll(async() = > {await startServer(); // Start the local service
  browser = await puppeteer.launch();
  page = await browser.newPage();
  await page.goto('http://127.0.0.1:3000');
});

afterAll(async() = > {await browser.close(); // Close the browser
  await stopServer(); // Stop the local server
});
Copy the code

Add the test code:

// test.js jest configuration file

describe('Test in browser'.() = > {
  test('Click copy btn.'.async() = > {let alertMsg = ' '; // Store popover information
    // Monitor pop-ups, which can be alert, confirm, or prompt
    await page.on('dialog'.async (dialog) => {
      alertMsg = dialog.message(); // Get the information in the dialog box
      await dialog.dismiss(); // Close the popover
    });
    await page.click('#test'); // Click the button
    expect(alertMsg).toBe('success ! '); // Set the expected result of the test.
  }, 6000);
});
Copy the code

Add a test start command

Just add a line to scripts and use NPM run test to start.

// package.json
"scripts": {
    "test": "jest"
  },
Copy the code

Configuration Travis CI

Create.travis. Yml in the root directory

language: node_js
node_js:
    - "12"
install:
    - npm install
before_script:
    - npm run build
script:
    - npm run test
Copy the code

With several life cycles, install dependencies – compile – and run tests.

Then push it to Github to run the test automatically (go to the Travis website to set up the repository, of course).