use jest-puppeteer fix more launch

.jest.image.js

@@ -12,7 +12,6 @@ module.exports = {
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
   testRegex: 'image\\.test\\.(j|t)s$',
-  testEnvironment: 'node',
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
@@ -20,4 +19,5 @@ module.exports = {
       tsConfigFile: './tsconfig.test.json',
     },
   },
+  preset: 'jest-puppeteer',
 };

jest-puppeteer.config.js

@@ -0,0 +1,15 @@
+// jest-puppeteer.config.js
+module.exports = {
+  launch: {
+    args: [
+      // Required for Docker version of Puppeteer
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      // This will write shared memory files into /tmp instead of /dev/shm,
+      // because Docker’s default for /dev/shm is 64MB
+      '--disable-dev-shm-usage',
+    ],
+  },
+  browser: 'chromium',
+  browserContext: 'default',
+};

package.json

@@ -162,6 +162,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.3",
     "@types/jest": "^26.0.0",
+    "@types/jest-environment-puppeteer": "^4.4.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",
@@ -223,6 +224,7 @@
     "intersection-observer": "^0.11.0",
     "jest": "^26.0.0",
     "jest-image-snapshot": "^4.0.0",
+    "jest-puppeteer": "^4.4.0",
     "jquery": "^3.4.1",
     "jsdom": "^16.0.0",
     "jsonml.js": "^0.1.0",

tests/shared/imageTest.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 // Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
 // eslint-disable-next-line import/no-unresolved
-import puppeteer, { Browser, Page } from 'puppeteer';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
@@ -18,32 +17,10 @@ expect.extend({ toMatchImageSnapshot });
 // eslint-disable-next-line jest/no-export
 export default function imageTest(component: React.ReactElement) {
   describe(`Image test`, () => {
-    let browser: Browser;
-    let page: Page;
-
-    beforeAll(async () => {
+    it('component image screenshot should correct', async () => {
       MockDate.set(moment('2016-11-22').valueOf());
-      browser = await puppeteer.launch({
-        args: [
-          // Required for Docker version of Puppeteer
-          '--no-sandbox',
-          '--disable-setuid-sandbox',
-          // This will write shared memory files into /tmp instead of /dev/shm,
-          // because Docker’s default for /dev/shm is 64MB
-          '--disable-dev-shm-usage',
-        ],
-      });
-      page = await browser.newPage();
       await page.goto(`file://${process.cwd()}/tests/index.html`);
       await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });
-    });
-
-    afterAll(() => {
-      browser.close();
-      MockDate.reset();
-    });
-
-    it('component image screenshot should correct', async () => {
       const html = ReactDOMServer.renderToString(component);
       await page.evaluate(innerHTML => {
         document.querySelector('#root')!.innerHTML = innerHTML;
@@ -52,6 +29,8 @@ export default function imageTest(component: React.ReactElement) {
       const image = await page.screenshot();
 
       expect(image).toMatchImageSnapshot();
+
+      MockDate.reset();
     });
   });
 }