⚡️ dependency: remove puppeteer in dependencies (#6204)

* ✂️ dependency:remove puppeteer in dependencies

* fix lint error

* remove catch install

* ⚡️ performance: use detectInstaller package mange

* 📝 docs: add some comment

* finish set test

* Modify the order and increase the search speed

* auto close browser

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   testURL: 'http://localhost:8000',
-  extraSetupFiles: ['./tests/setupTests.js'],
+  testEnvironment: './tests/PuppeteerEnvironment',
+  verbose: false,
   globals: {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: false,
     localStorage: null,

package.json

@@ -33,6 +33,7 @@
     "start:no-ui": "cross-env UMI_UI=none umi dev",
     "start:pre": "cross-env REACT_APP_ENV=pre umi dev",
     "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev",
+    "pretest": "node ./tests/beforeTest",
     "test": "umi test",
     "test:all": "node ./tests/run-tests.js",
     "test:component": "umi test ./src/components",
@@ -89,9 +90,11 @@
     "@umijs/preset-ant-design-pro": "^1.0.1",
     "@umijs/preset-react": "^1.4.8",
     "@umijs/preset-ui": "^2.0.9",
+    "carlo": "^0.9.46",
     "chalk": "^3.0.0",
     "cross-env": "^7.0.0",
     "cross-port-killer": "^1.1.1",
+    "detect-installer": "^1.0.1",
     "enzyme": "^3.11.0",
     "eslint": "^6.8.0",
     "express": "^4.17.1",
@@ -102,11 +105,9 @@
     "mockjs": "^1.0.1-beta3",
     "prettier": "^2.0.1",
     "pro-download": "1.0.1",
+    "puppeteer-core": "^2.1.1",
     "stylelint": "^13.0.0"
   },
-  "optionalDependencies": {
-    "puppeteer": "^2.0.0"
-  },
   "engines": {
     "node": ">=10.0.0"
   },

src/e2e/baseLayout.e2e.js

@@ -3,8 +3,6 @@ const RouterConfig = require('../../config/config').default.routes;
 
 const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
 
-const getBrowser = require('./getBrowser');
-
 function formatter(routes, parentPath = '') {
   const fixedParentPath = parentPath.replace(/\/{1,}/g, '/');
   let result = [];
@@ -21,15 +19,7 @@ function formatter(routes, parentPath = '') {
   return uniq(result.filter((item) => !!item));
 }
 
-let browser;
-let page;
-
-beforeAll(async () => {
-  browser = await getBrowser();
-});
-
 beforeEach(async () => {
-  page = await browser.newPage();
   await page.goto(`${BASE_URL}`);
   await page.evaluate(() => {
     localStorage.setItem('antd-pro-authority', '["admin"]');
@@ -52,8 +42,16 @@ describe('Ant Design Pro E2E test', () => {
   routers.forEach((route) => {
     it(`test pages ${route}`, testPage(route));
   });
-});
 
-afterAll(() => {
-  browser.close();
+  it('topmenu should have footer', async () => {
+    const params = '?navTheme=light&layout=topmenu';
+    await page.goto(`${BASE_URL}${params}`);
+    await page.waitForSelector('footer', {
+      timeout: 2000,
+    });
+    const haveFooter = await page.evaluate(
+      () => document.getElementsByTagName('footer').length > 0,
+    );
+    expect(haveFooter).toBeTruthy();
+  });
 });

src/e2e/getBrowser.js

@@ -1,16 +0,0 @@
-import puppeteer from 'puppeteer';
-
-const getBrowser = async () => {
-  const browser = await puppeteer.launch({
-    args: [
-      '--disable-gpu',
-      '--disable-dev-shm-usage',
-      '--no-first-run',
-      '--no-zygote',
-      '--no-sandbox',
-    ],
-  });
-  return browser;
-};
-
-module.exports = getBrowser;

src/e2e/topMenu.e2e.js

@@ -1,36 +0,0 @@
-const getBrowser = require('./getBrowser');
-
-const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
-
-let browser;
-let page;
-
-beforeAll(async () => {
-  browser = await getBrowser();
-});
-
-beforeEach(async () => {
-  page = await browser.newPage();
-  await page.goto(`${BASE_URL}`);
-  await page.evaluate(() => {
-    localStorage.setItem('antd-pro-authority', '["admin"]');
-  });
-});
-
-describe('Homepage', () => {
-  it('topmenu should have footer', async () => {
-    const params = '?navTheme=light&layout=topmenu';
-    await page.goto(`${BASE_URL}${params}`);
-    await page.waitForSelector('footer', {
-      timeout: 2000,
-    });
-    const haveFooter = await page.evaluate(
-      () => document.getElementsByTagName('footer').length > 0,
-    );
-    expect(haveFooter).toBeTruthy();
-  });
-});
-
-afterAll(() => {
-  browser.close();
-});

tests/PuppeteerEnvironment.js

@@ -0,0 +1,41 @@
+// eslint-disable-next-line
+const NodeEnvironment = require('jest-environment-node');
+const getBrowser = require('./getBrowser');
+
+class PuppeteerEnvironment extends NodeEnvironment {
+  // Jest is not available here, so we have to reverse engineer
+  // the setTimeout function, see https://github.com/facebook/jest/blob/v23.1.0/packages/jest-runtime/src/index.js#L823
+  setTimeout(timeout) {
+    if (this.global.jasmine) {
+      // eslint-disable-next-line no-underscore-dangle
+      this.global.jasmine.DEFAULT_TIMEOUT_INTERVAL = timeout;
+    } else {
+      this.global[Symbol.for('TEST_TIMEOUT_SYMBOL')] = timeout;
+    }
+  }
+
+  async setup() {
+    const browser = await getBrowser();
+    const page = await browser.newPage();
+    this.global.browser = browser;
+    this.global.page = page;
+  }
+
+  async teardown() {
+    const { page, browser } = this.global;
+
+    if (page) {
+      await page.close();
+    }
+
+    if (browser) {
+      await browser.disconnect();
+    }
+
+    if (browser) {
+      await browser.close();
+    }
+  }
+}
+
+module.exports = PuppeteerEnvironment;

tests/beforeTest.js

@@ -0,0 +1,39 @@
+/* eslint-disable global-require */
+/* eslint-disable import/no-extraneous-dependencies */
+const { execSync } = require('child_process');
+const { join } = require('path');
+const findChrome = require('carlo/lib/find_chrome');
+const detectInstaller = require('detect-installer');
+
+const installPuppeteer = () => {
+  // find can use package manger
+  const packages = detectInstaller(join(__dirname, '../../'));
+  // get installed package manger
+  const packageName = packages.find(detectInstaller.hasPackageCommand) || 'npm';
+  console.log(`🤖 will use ${packageName} install puppeteer`);
+  const command = `${packageName} ${packageName.includes('yarn') ? 'add' : 'i'} puppeteer`;
+  execSync(command, {
+    stdio: 'inherit',
+  });
+};
+
+const initPuppeteer = async () => {
+  try {
+    // eslint-disable-next-line import/no-unresolved
+    const findChromePath = await findChrome({});
+    const { executablePath } = findChromePath;
+    console.log(`🧲 find you browser in ${executablePath}`);
+    return;
+  } catch (error) {
+    console.log('🧲 no find chrome');
+  }
+
+  try {
+    require.resolve('puppeteer');
+  } catch (error) {
+    // need install puppeteer
+    await installPuppeteer();
+  }
+};
+
+initPuppeteer();

tests/getBrowser.js

@@ -0,0 +1,45 @@
+/* eslint-disable global-require */
+/* eslint-disable import/no-extraneous-dependencies */
+const findChrome = require('carlo/lib/find_chrome');
+
+const getBrowser = async () => {
+  try {
+    // eslint-disable-next-line import/no-unresolved
+    const puppeteer = require('puppeteer');
+    const browser = await puppeteer.launch({
+      args: [
+        '--disable-gpu',
+        '--disable-dev-shm-usage',
+        '--no-first-run',
+        '--no-zygote',
+        '--no-sandbox',
+      ],
+    });
+    return browser;
+  } catch (error) {
+    // console.log(error)
+  }
+
+  try {
+    // eslint-disable-next-line import/no-unresolved
+    const puppeteer = require('puppeteer-core');
+    const findChromePath = await findChrome({});
+    const { executablePath } = findChromePath;
+    const browser = await puppeteer.launch({
+      executablePath,
+      args: [
+        '--disable-gpu',
+        '--disable-dev-shm-usage',
+        '--no-first-run',
+        '--no-zygote',
+        '--no-sandbox',
+      ],
+    });
+    return browser;
+  } catch (error) {
+    console.log('🧲 no find chrome');
+  }
+  throw new Error('no find puppeteer');
+};
+
+module.exports = getBrowser;

tests/setupTests.js

@@ -1,22 +0,0 @@
-import 'jsdom-global/register';
-
-// browserMocks.js
-const localStorageMock = (() => {
-  let store = {};
-
-  return {
-    getItem(key) {
-      return store[key] || null;
-    },
-    setItem(key, value) {
-      store[key] = value.toString();
-    },
-    clear() {
-      store = {};
-    },
-  };
-})();
-
-Object.defineProperty(window, 'localStorage', {
-  value: localStorageMock,
-});