chore: 添加测试工具jest和puppeteer

Author: DaKoala

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
     'class-methods-use-this': 'off',
     'no-unused-expressions': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     'react/jsx-filename-extension': 'off',

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  setupFilesAfterEnv: [
+    './jest.setup.js',
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+};

jest.setup.js

@@ -0,0 +1 @@
+jest.setTimeout(10000);

package.json

@@ -7,14 +7,19 @@
     "build": "rm -rf ./dist && webpack --config webpack.prod.js",
     "dev": "webpack-dev-server --config webpack.dev.js --open",
     "lint": "eslint --ext .ts,.tsx src/ --fix",
+    "test": "jest",
     "clean": "rm -rf ./node_modules"
   },
   "keywords": [],
   "author": "Yijie Zou",
   "license": "ISC",
   "devDependencies": {
     "@types/classnames": "^2.2.9",
+    "@types/expect-puppeteer": "^3.3.2",
     "@types/history": "^4.7.3",
+    "@types/jest": "^24.0.19",
+    "@types/jest-environment-puppeteer": "^4.3.1",
+    "@types/puppeteer": "^1.20.2",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.0",
@@ -32,9 +37,13 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
+    "jest-puppeteer": "^4.3.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "puppeteer": "^1.20.0",
     "style-loader": "^1.0.0",
+    "ts-jest": "^24.1.0",
     "ts-loader": "^6.1.2",
     "typescript": "^3.6.3",
     "webpack": "^4.40.2",
@@ -50,7 +59,6 @@
     "mobx": "^5.14.0",
     "mobx-react": "^6.1.3",
     "mobx-react-router": "^4.0.7",
-    "puppeteer": "^1.20.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-inlinesvg": "^1.1.7",

src/test/index.test.ts

@@ -0,0 +1,38 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:3000');
+});
+
+describe('Home page', () => {
+  it('page should be titled spring', async () => {
+    const title = await page.title();
+    expect(title).toBe('Spring');
+  });
+
+  it('page should have a logo', async () => {
+    const logo = await page.$eval('h1', (e) => e.innerHTML);
+    expect(logo).toBe('Spring');
+  });
+});
+
+describe('Login Form', () => {
+  it('form should be rendered', async () => {
+    const formTitle = await page.$eval('.login__title', (e) => e.innerHTML);
+    expect(formTitle).toBe('Log in');
+  });
+
+  it('login button should be active', async () => {
+    await page.focus('#EMAIL');
+    await page.type('#EMAIL', 'seimc1228');
+    await page.focus('#PASSWORD');
+    await page.type('#PASSWORD', 'seimc1228_password');
+    const buttonClass = await page.$eval('.login button', (e) => e.className);
+    expect(buttonClass.indexOf('btn__disabled')).toBe(-1);
+  });
+
+  it('can log in', async () => {
+    await page.$eval('.login button', (e: HTMLButtonElement) => e.click());
+    await page.waitForNavigation();
+    const url = page.url();
+    expect(url.indexOf('/user') > 0).toBe(true);
+  });
+});

tsconfig.json

@@ -9,6 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
+    "types": ["node", "jest-environment-puppeteer"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]