Support headless chrome as a test environment

jestjs/jest#3940

jest.config.js

@@ -6,5 +6,10 @@ module.exports = {
     '^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js'
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  preset: "jest-puppeteer",
+  globals: {
+    window: {},
+    global:{},
+  }
 };

jest.setup.js

@@ -1,3 +1,5 @@
+// require('expect-puppeteer')
+
 const windowCrypto = require("window-crypto");
 const crypto = require('crypto');
 

package.json

@@ -49,14 +49,19 @@
     "@material-ui/icons": "^4.9.1",
     "@nervosnetwork/ckb-sdk-core": "^0.30.0",
     "@nervosnetwork/ckb-sdk-utils": "^0.30.0",
+    "@types/expect-puppeteer": "^4.4.3",
+    "@types/jest-environment-puppeteer": "^4.3.1",
+    "@types/puppeteer": "^3.0.0",
     "axios": "^0.19.2",
     "blake2b": "^2.1.3",
     "browser-passworder": "^2.0.3",
     "dotenv-webpack": "^1.8.0",
     "elliptic": "^6.5.2",
     "formik": "^2.1.4",
+    "jest-puppeteer": "^4.4.0",
     "keccak": "^3.0.0",
     "moment": "^2.25.3",
+    "puppeteer": "^3.3.0",
     "qrcode.react": "^1.0.0",
     "query-string": "^6.12.1",
     "react": "^16.13.0",

src/test/headlessChrome.test.ts

@@ -0,0 +1,11 @@
+import 'expect-puppeteer'
+
+describe('test puppeteer', () => {
+  beforeAll(async () => {
+    await page.goto('https://so.com')
+  })
+
+  it('should display "360" text on so.com page', async () => {
+    await expect(page).toMatch('360')
+  })
+})