setup(jest+typescript): 修改jest配置，使测试支持typescript

.babelrc

@@ -16,7 +16,13 @@
       ]
     },
     "test": {
-      "presets": ["react-app"]
+      "plugins":["dynamic-import-node"],
+      "presets": [
+        "env",
+        "stage-1",
+        "stage-2",
+        "react"
+      ]
     }
   }
 }

jest.config.js

@@ -2,12 +2,32 @@ module.exports = {
   setupFiles: [
     '<rootDir>/source/tests/setup.js',
   ],
-	moduleNameMapper: {
-	  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
-	  "\\.(css|less)$": "<rootDir>/tools/assetsTransformer.js"
-	},
-	moduleFileExtensions: ["js"],
-	testMatch: [ "**/__tests__/**/*.js", "**/?(*.)+(test).js" ],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
+    "\\.(css|less)$": "<rootDir>/tools/assetsTransformer.js"
+  },
+  moduleFileExtensions: [
+    "ts", "tsx", "js"
+  ],
+  transform: {
+    "^.+\\.js$": "babel-jest",
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  globals: {
+    "ts-jest": {
+      "tsConfigFile": "tsconfig.json",
+      "enableTsDiagnostics": true,
+
+    },
+    "NODE_ENV": "test"
+  },
+  testMatch: [
+    "**/__tests__/**/*.(ts|tsx|js)",
+    "**/?(*.)+(test).(ts|tsx|js)"
+  ],
+  testPathIgnorePatterns: [
+      "<rootDir>/node_modules/",
+  ],
   verbose: true,
   notify: false,
   collectCoverage: false,

package.json

@@ -62,6 +62,8 @@
     "react-dom": ">= 16.1.1"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.1.12",
+    "@types/jest": "^23.3.0",
     "@types/node": "^10.5.2",
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
@@ -74,6 +76,7 @@
     "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-dynamic-import-node": "^2.0.0",
     "babel-plugin-import": "^1.4.0",
     "babel-plugin-react-display-name": "^2.0.0",
     "babel-preset-env": "^1.6.1",
@@ -144,6 +147,7 @@
     "style-loader": "^0.18.1",
     "stylelint": "^8.3.1",
     "stylelint-config-standard": "^18.0.0",
+    "ts-jest": "^23.0.1",
     "typescript": "^2.9.2",
     "url-loader": "^0.5.8",
     "uuid": "^3.1.0",

source/components/Button/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/demoTest';
+
+demoTest('button');

source/components/Button/__tests__/index.test.js.bak → source/components/Button/__tests__/index.test.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { render, mount } from 'enzyme';
-import Button from '..';
-import Icon from '../../Icon';
+import Button from '../index';
+import Icon from '../../Icon/index';
+import * as TestUtils from 'react-dom/test-utils';
 
 describe('Button', () => {
   it('renders correctly', () => {
@@ -48,17 +49,22 @@ describe('Button', () => {
     const wrapper = mount(
       <Button><Text>按钮</Text></Button>
     );
-    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
+
+
+    const defaultPrefix = Button.defaultProps.prefixCls;
+    const prefixCls = '.' + defaultPrefix;
+
+    expect(wrapper.find(prefixCls).hasClass(`${defaultPrefix}-two-chinese-chars`)).toBe(true);
     wrapper.setProps({
       children: <Text>大按钮</Text>,
     });
     wrapper.update();
-    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
+    expect(wrapper.find(prefixCls).hasClass(`${defaultPrefix}-two-chinese-chars`)).toBe(false);
     wrapper.setProps({
       children: <Text>按钮</Text>,
     });
     wrapper.update();
-    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
+    expect(wrapper.find(prefixCls).hasClass(`${defaultPrefix}-two-chinese-chars`)).toBe(true);
   });
 
   it('have static property for type detecting', () => {
@@ -70,7 +76,7 @@ describe('Button', () => {
   });
 
   it('should change loading state instantly by default', () => {
-    class DefaultButton extends Component {
+    class DefaultButton extends React.Component {
       state = {
         loading: false,
       };
@@ -87,13 +93,14 @@ describe('Button', () => {
     const wrapper = mount(
       <DefaultButton />
     );
+    const defaultPrefix = Button.defaultProps.prefixCls;
     wrapper.simulate('click');
-    expect(wrapper.find('.ant-btn-loading').length).toBe(1);
+    expect(wrapper.find(`.${defaultPrefix}-loading`).length).toBe(1);
   });
 
   it('should change loading state with delay', () => {
     // eslint-disable-next-line
-    class DefaultButton extends Component {
+    class DefaultButton extends React.Component {
       state = {
         loading: false,
       };

source/tests/polyfills/getSelection.js

@@ -17,4 +17,4 @@ function getSelectionShim() {
     setEnd: function() {},
     addRange: function() {},
   };
-};
+}

tsconfig.json

@@ -12,6 +12,10 @@
       "dom.iterable",
       "es2015"
     ],
+    // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
+    "allowSyntheticDefaultImports": true,
+    //Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.
+    "esModuleInterop": true,
     "baseUrl": "./source/"
   },
   "include": [