test: 测试集成

Author: zhaozhiwen

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Alert /> should render alert with type 1`] = `
+<div
+  class="happy-alert"
+  style="background: rgb(83, 82, 237);"
+>
+  info
+</div>
+`;
+
+exports[`<Alert /> should render alert with type 2`] = `
+<div
+  class="happy-alert"
+  style="background: rgb(255, 165, 2);"
+>
+  warning
+</div>
+`;
+
+exports[`<Alert /> should render alert with type 3`] = `
+<div
+  class="happy-alert"
+  style="background: rgb(46, 213, 115);"
+>
+  positive
+</div>
+`;
+
+exports[`<Alert /> should render alert with type 4`] = `
+<div
+  class="happy-alert"
+  style="background: rgb(255, 71, 87);"
+>
+  negative
+</div>
+`;
+
+exports[`<Alert /> should render default 1`] = `
+<div>
+  <div
+    class="happy-alert"
+    style="background: rgb(83, 82, 237);"
+  >
+    default
+  </div>
+</div>
+`;

components/alert/__tests__/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Alert from '../alert';
+
+describe('<Alert />', () => {
+  test('should render default', () => {
+    const { container } = render(<Alert>default</Alert>);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render alert with type', () => {
+    const kinds: any[] = ['info', 'warning', 'positive', 'negative'];
+
+    const { getByText } = render(
+      <>
+        {kinds.map(k => (
+          <Alert kind={k} key={k}>
+            {k}
+          </Alert>
+        ))}
+      </>,
+    );
+
+    kinds.forEach(k => {
+      expect(getByText(k)).toMatchSnapshot();
+    });
+  });
+});

components/alert/style/index.less

@@ -4,5 +4,5 @@
   padding: 20px;
   color: white;
   background: white;
-  border-radius: 3;
+  border-radius: 3px;
 }

gulpfile.js

@@ -12,7 +12,11 @@ const paths = {
     dist: 'dist',
   },
   styles: 'components/**/*.less',
-  scripts: ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}'],
+  scripts: [
+    'components/**/*.{ts,tsx}',
+    '!components/**/demo/*.{ts,tsx}',
+    '!components/**/__tests__/*.{ts,tsx}',
+  ],
 };
 
 /**

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/components'],
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': 'identity-obj-proxy',
+    '^components$': '<rootDir>/components/index.tsx',
+    '^components(.*)$': '<rootDir>/components/$1',
+  },
+  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/esm/', '/dist/'],
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

package.json

@@ -14,7 +14,10 @@
     "build:types": "tsc --emitDeclarationOnly",
     "build": "npm run clean && npm run build:types && gulp",
     "commit": "git-cz",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:update": "jest --updateSnapshot"
   },
   "repository": {
     "type": "git",
@@ -47,6 +50,10 @@
     "@babel/preset-typescript": "^7.7.7",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^24.0.25",
+    "@types/testing-library__react": "^9.1.2",
     "@types/vfile-message": "^2.0.0",
     "@umijs/fabric": "^1.2.12",
     "antd": "^3.26.3",
@@ -62,6 +69,8 @@
     "gulp-cssnano": "^2.1.3",
     "gulp-less": "^4.0.1",
     "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.9.0",
     "less": "^3.10.3",
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
@@ -73,13 +82,16 @@
     "react-simple-code-editor": "^0.10.0",
     "react-use": "^13.12.2",
     "rimraf": "^3.0.0",
+    "snapshot-diff": "^0.6.1",
     "through2": "^3.0.1",
+    "ts-jest": "^24.2.0",
     "typescript": "^3.7.3"
   },
   "lint-staged": {
     "components/**/*.ts?(x)": [
       "prettier --write",
       "eslint --fix",
+      "jest --bail --findRelatedTests",
       "git add"
     ],
     "components/**/*.less": [

tsconfig.json

@@ -12,5 +12,5 @@
     "esModuleInterop": true
   },
   "include": ["components"],
-  "exclude": ["components/**/demo"]
+  "exclude": ["components/**/demo", "components/**/__tests__"]
 }