diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..17d82f5
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,16 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'no-template-curly-in-string': 0,
+    'prefer-promise-reject-errors': 0,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    'jsx-a11y/role-supports-aria-props': 0,
+    'jsx-a11y/no-noninteractive-tabindex': 0,
+    'import/no-extraneous-dependencies': 0,
+  },
+};
diff --git a/.fatherrc.js b/.fatherrc.js
new file mode 100644
index 0000000..9d8c16b
--- /dev/null
+++ b/.fatherrc.js
@@ -0,0 +1,9 @@
+export default {
+  cjs: "babel",
+  esm: { type: "babel", importLibToEs: true },
+  preCommit: {
+    eslint: true,
+    prettier: true,
+  },
+  runtimeHelpers: true,
+};
diff --git a/.gitignore b/.gitignore
index 36ad908..4e39e43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,7 @@ build
 lib
 es
 coverage/
-yarn.lock
\ No newline at end of file
+yarn.lock
+package-lock.json
+.storybook
+.doc
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..895b8bd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "printWidth": 100
+}
diff --git a/.travis.yml b/.travis.yml
index d16a491..2fbc8bf 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,11 +5,9 @@ sudo: false
 notifications:
   email:
   - yiminghe@gmail.com
-  - afc163@gmail.com
-  - yesmeck@gmail.com
 
 node_js:
-- 10
+- 12
 
 script:
 - |
@@ -19,7 +17,10 @@ script:
     else
       npm run $TEST_TYPE
     fi
+
 env:
   matrix:
   - TEST_TYPE=lint
   - TEST_TYPE=test
+  - TEST_TYPE=coverage
+  - TEST_TYPE=compile
diff --git a/assets/index.less b/assets/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/examples/fast-progress.html b/examples/fast-progress.html
deleted file mode 100644
index 48cdce8..0000000
--- a/examples/fast-progress.html
+++ /dev/null
@@ -1 +0,0 @@
-placeholder
diff --git a/examples/fast-progress.js b/examples/fast-progress.tsx
similarity index 66%
rename from examples/fast-progress.js
rename to examples/fast-progress.tsx
index 21b1644..7b8d8dd 100644
--- a/examples/fast-progress.js
+++ b/examples/fast-progress.tsx
@@ -1,11 +1,9 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import * as React from 'react';
+import { Line, Circle, ProgressProps } from '../src';
 
-class App extends Component {
-  constructor() {
-    super();
+class App extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 0,
     };
@@ -13,6 +11,8 @@ class App extends Component {
     this.restart = this.restart.bind(this);
   }
 
+  private tm: number;
+
   componentDidMount() {
     this.increase();
   }
@@ -39,8 +39,8 @@ class App extends Component {
     const { percent } = this.state;
     return (
       <div style={{ margin: 10, width: 200 }}>
-        <Circle strokeWidth="6" percent={percent} />
-        <Line strokeWidth="4" percent={percent} />
+        <Circle strokeWidth={6} percent={percent} />
+        <Line strokeWidth={4} percent={percent} />
         <button type="button" onClick={this.restart}>
           Restart
         </button>
@@ -49,4 +49,4 @@ class App extends Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('__react-content'));
+export default App;
diff --git a/examples/gap.html b/examples/gap.html
deleted file mode 100644
index 48cdce8..0000000
--- a/examples/gap.html
+++ /dev/null
@@ -1 +0,0 @@
-placeholder
diff --git a/examples/gap.js b/examples/gap.tsx
similarity index 76%
rename from examples/gap.js
rename to examples/gap.tsx
index 5bc6163..cd752b3 100644
--- a/examples/gap.js
+++ b/examples/gap.tsx
@@ -1,15 +1,15 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import * as React from 'react';
+import { Circle, ProgressProps } from '../src';
 
 const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
+
 function getColor(index) {
   return colorMap[(index + colorMap.length) % colorMap.length];
 }
-class Example extends Component {
-  constructor() {
-    super();
+
+class Example extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 30,
       colorIndex: 0,
@@ -18,8 +18,8 @@ class Example extends Component {
   }
 
   changeState() {
-    const value = parseInt(Math.random() * 100, 10);
-    const colorIndex = parseInt(Math.random() * 3, 10);
+    const value = parseInt((Math.random() * 100).toString(), 10);
+    const colorIndex = parseInt((Math.random() * 3).toString(), 10);
     this.setState({
       percent: value,
       colorIndex,
@@ -45,7 +45,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="top"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -55,8 +55,8 @@ class Example extends Component {
             percent={[percent / 3, percent / 3, percent / 3]}
             gapDegree={70}
             gapPosition="bottom"
-            strokeWidth="6"
-            trailWidth="6"
+            strokeWidth={6}
+            trailWidth={6}
             strokeLinecap="round"
             strokeColor={[color, getColor(colorIndex + 1), getColor(colorIndex + 2)]}
           />
@@ -67,7 +67,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="left"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -77,7 +77,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="right"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -87,4 +87,4 @@ class Example extends Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;
diff --git a/examples/gradient-circle.html b/examples/gradient-circle.html
deleted file mode 100644
index b3a4252..0000000
--- a/examples/gradient-circle.html
+++ /dev/null
@@ -1 +0,0 @@
-placeholder
\ No newline at end of file
diff --git a/examples/gradient-circle.js b/examples/gradient-circle.tsx
similarity index 78%
rename from examples/gradient-circle.js
rename to examples/gradient-circle.tsx
index 9acefee..2b844e8 100644
--- a/examples/gradient-circle.js
+++ b/examples/gradient-circle.tsx
@@ -1,7 +1,5 @@
-import 'rc-progress/assets/index.less';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import * as React from 'react';
+import { Circle } from '../src';
 
 const Example = () => {
   const circleContainerStyle = {
@@ -9,13 +7,14 @@ const Example = () => {
     height: '250px',
     display: 'inline-block',
   };
+
   return (
     <div>
       <h3>Circle Progress {90}%</h3>
       <div style={circleContainerStyle}>
         <Circle
           percent={90}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={{
             '0%': '#108ee9',
@@ -27,7 +26,7 @@ const Example = () => {
       <div style={circleContainerStyle}>
         <Circle
           percent={100}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={{
             '100%': '#108ee9',
@@ -39,7 +38,7 @@ const Example = () => {
       <div style={circleContainerStyle}>
         <Circle
           percent={[65, 100]}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={[
             '#87d068',
@@ -54,4 +53,4 @@ const Example = () => {
   );
 };
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;
diff --git a/examples/simple.html b/examples/simple.html
deleted file mode 100644
index b3a4252..0000000
--- a/examples/simple.html
+++ /dev/null
@@ -1 +0,0 @@
-placeholder
\ No newline at end of file
diff --git a/examples/simple.js b/examples/simple.tsx
similarity index 64%
rename from examples/simple.js
rename to examples/simple.tsx
index 2795052..b09ec41 100644
--- a/examples/simple.js
+++ b/examples/simple.tsx
@@ -1,11 +1,9 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import * as React from 'react';
+import { Line, Circle, ProgressProps } from '../src';
 
-class Example extends Component {
-  constructor() {
-    super();
+class Example extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 30,
       color: '#3FC7FA',
@@ -15,10 +13,10 @@ class Example extends Component {
 
   changeState() {
     const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
-    const value = parseInt(Math.random() * 100, 10);
+    const value = parseInt((Math.random() * 100).toString(), 10);
     this.setState({
       percent: value,
-      color: colorMap[parseInt(Math.random() * 3, 10)],
+      color: colorMap[parseInt((Math.random() * 3).toString(), 10)],
     });
   }
 
@@ -36,16 +34,16 @@ class Example extends Component {
       <div>
         <h3>Line Progress {percent}%</h3>
         <div style={containerStyle}>
-          <Line percent={percent} strokeWidth="4" strokeColor={color} />
+          <Line percent={percent} strokeWidth={4} strokeColor={color} />
           <Line
             percent={[percent / 2, percent / 2]}
-            strokeWidth="4"
+            strokeWidth={4}
             strokeColor={[color, '#CCC']}
           />
         </div>
         <h3>Circle Progress {percent}%</h3>
         <div style={circleContainerStyle}>
-          <Circle percent={percent} strokeWidth="6" strokeLinecap="round" strokeColor={color} />
+          <Circle percent={percent} strokeWidth={6} strokeLinecap="round" strokeColor={color} />
         </div>
         <p>
           <button type="button" onClick={this.changeState}>
@@ -57,4 +55,4 @@ class Example extends Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;
diff --git a/index.js b/index.js
deleted file mode 100644
index 84efef7..0000000
--- a/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Progress, {  Line, Circle } from './src/';
-
-export {
-  Line,
-  Circle,
-};
-
-export default Progress;
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..0a09639
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  setupFiles: ["./tests/setup.js"],
+  snapshotSerializers: [require.resolve("enzyme-to-json/serializer")],
+};
diff --git a/now.json b/now.json
new file mode 100644
index 0000000..2302b8d
--- /dev/null
+++ b/now.json
@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-progress",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": ".doc" }
+    }
+  ]
+}
diff --git a/package.json b/package.json
index f0df896..85c2ffe 100644
--- a/package.json
+++ b/package.json
@@ -17,57 +17,47 @@
     "url": "http://github.com/react-component/progress/issues"
   },
   "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "types": "./typings/index.d.ts",
+  "main": "./lib/index",
+  "module": "./es/index",
   "files": [
-    "dist",
     "lib",
-    "assets/*.css",
-    "es",
-    "typings/index.d.ts"
+    "es"
   ],
-  "config": {
-    "port": 8000,
-    "entry": {
-      "rc-progress": [
-        "./src/index.js",
-        "./assets/index.less"
-      ]
-    }
-  },
   "scripts": {
-    "dist": "rc-tools run dist",
-    "build": "rc-tools run build",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
-    "compile": "rc-tools run compile",
-    "pub": "rc-tools run pub",
-    "lint": "rc-tools run lint",
-    "lint:fix": "rc-tools run lint --fix",
-    "prettier": "rc-tools run prettier",
-    "test": "rc-tools run test",
-    "prepublish": "rc-tools run guard",
-    "coverage": "rc-tools run test --coverage",
-    "pre-commit": "rc-tools run pre-commit",
-    "lint-staged": "lint-staged"
+    "start": "cross-env NODE_ENV=development father doc dev --storybook",
+    "build": "father doc build --storybook",
+    "compile": "father build",
+    "gh-pages": "npm run build && father doc deploy",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "test": "father test",
+    "coverage": "father test --coverage"
   },
-  "devDependencies": {
-    "lint-staged": "^10.0.1",
-    "pre-commit": "1.x",
-    "rc-tools": "9.x",
+  "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
-  "pre-commit": [
-    "lint-staged"
-  ],
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "npm run pre-commit"
-    ]
-  },
   "dependencies": {
+    "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@umijs/fabric": "^2.0.0",
+    "cross-env": "^7.0.0",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme-to-json": "^3.1.2",
+    "eslint": "^7.6.0",
+    "father": "^2.29.6",
+    "np": "^6.5.0",
+    "prettier": "^2.1.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "typescript": "^4.0.2"
   }
 }
diff --git a/src/Circle.js b/src/Circle.tsx
similarity index 89%
rename from src/Circle.js
rename to src/Circle.tsx
index 0ac2743..c645332 100644
--- a/src/Circle.js
+++ b/src/Circle.tsx
@@ -1,19 +1,26 @@
-/* eslint react/prop-types: 0 */
-import React, { useMemo } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
+import { ProgressProps, GapPositionType } from './interface';
 
 let gradientSeed = 0;
 
-function stripPercentToNumber(percent) {
+function stripPercentToNumber(percent: string) {
   return +percent.replace('%', '');
 }
 
-function toArray(symArray) {
+function toArray(symArray: any) {
   return Array.isArray(symArray) ? symArray : [symArray];
 }
 
-function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
+function getPathStyles(
+  offset: number,
+  percent: number,
+  strokeColor: string,
+  strokeWidth: number,
+  gapDegree = 0,
+  gapPosition: GapPositionType,
+) {
   const radius = 50 - strokeWidth / 2;
   let beginPositionX = 0;
   let beginPositionY = -radius;
@@ -57,7 +64,7 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
   };
 }
 
-const Circle = ({
+const Circle: React.FC<ProgressProps> = ({
   prefixCls,
   strokeWidth,
   trailWidth,
@@ -71,7 +78,7 @@ const Circle = ({
   percent,
   ...restProps
 }) => {
-  const gradientId = useMemo(() => {
+  const gradientId = React.useMemo(() => {
     gradientSeed += 1;
     return gradientSeed;
   }, []);
@@ -158,4 +165,6 @@ const Circle = ({
 
 Circle.defaultProps = defaultProps;
 
+Circle.displayName = 'Circle';
+
 export default Circle;
diff --git a/src/Line.js b/src/Line.tsx
similarity index 89%
rename from src/Line.js
rename to src/Line.tsx
index 2a75703..8aa48c9 100644
--- a/src/Line.js
+++ b/src/Line.tsx
@@ -1,9 +1,9 @@
-/* eslint react/prop-types: 0 */
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
+import { ProgressProps } from './interface';
 
-const Line = ({
+const Line: React.FC<ProgressProps> = ({
   className,
   percent,
   prefixCls,
@@ -16,6 +16,7 @@ const Line = ({
   transition,
   ...restProps
 }) => {
+  // eslint-disable-next-line no-param-reassign
   delete restProps.gapPosition;
   const percentList = Array.isArray(percent) ? percent : [percent];
   const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
@@ -60,7 +61,7 @@ const Line = ({
             className={`${prefixCls}-line-path`}
             d={pathString}
             strokeLinecap={strokeLinecap}
-            stroke={color}
+            stroke={color as string}
             strokeWidth={strokeWidth}
             fillOpacity="0"
             ref={paths[index]}
@@ -74,4 +75,6 @@ const Line = ({
 
 Line.defaultProps = defaultProps;
 
+Line.displayName = 'Line';
+
 export default Line;
diff --git a/src/common.js b/src/common.ts
similarity index 76%
rename from src/common.js
rename to src/common.ts
index 8ac8362..4b7e6fe 100644
--- a/src/common.js
+++ b/src/common.ts
@@ -1,6 +1,7 @@
 import { useRef, useEffect } from 'react';
+import { ProgressProps } from './interface';
 
-export const defaultProps = {
+export const defaultProps: Partial<ProgressProps> = {
   className: '',
   percent: 0,
   prefixCls: 'rc-progress',
@@ -12,9 +13,10 @@ export const defaultProps = {
   trailWidth: 1,
 };
 
-export const useTransitionDuration = percentList => {
+export const useTransitionDuration = (percentList: number[]) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const paths = percentList.map(() => useRef());
-  const prevTimeStamp = useRef();
+  const prevTimeStamp = useRef(null);
   useEffect(() => {
     const now = Date.now();
     let updated = false;
diff --git a/src/index.js b/src/index.ts
similarity index 53%
rename from src/index.js
rename to src/index.ts
index 01fb4ab..cf24363 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -1,7 +1,8 @@
 import Line from './Line';
 import Circle from './Circle';
+import { ProgressProps } from './interface';
 
-export { Line, Circle };
+export { Line, Circle, ProgressProps };
 
 export default {
   Line,
diff --git a/src/interface.ts b/src/interface.ts
new file mode 100644
index 0000000..8599290
--- /dev/null
+++ b/src/interface.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface ProgressProps {
+  strokeWidth?: number;
+  trailWidth?: number;
+  className?: string;
+  percent?: number | number[];
+  strokeColor?: StrokeColorType;
+  trailColor?: string;
+  strokeLinecap?: StrokeLinecapType;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+  gapDegree?: number;
+  gapPosition?: GapPositionType;
+  transition?: string;
+}
+
+export type StrokeColorType = string | string[] | object;
+
+export type GapPositionType = 'top' | 'right' | 'bottom' | 'left';
+
+export type StrokeLinecapType = 'round' | 'butt' | 'square';
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
new file mode 100644
index 0000000..80c0365
--- /dev/null
+++ b/tests/__snapshots__/index.spec.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Progress Circle should show right gapPosition 1`] = `
+Array [
+  <Circle
+    className=""
+    gapDegree={70}
+    gapPosition="top"
+    percent={30}
+    prefixCls="rc-progress"
+    strokeColor="#2db7f5"
+    strokeLinecap="square"
+    strokeWidth="6"
+    style={Object {}}
+    trailColor="#D9D9D9"
+    trailWidth={1}
+  >
+    <svg
+      className="rc-progress-circle"
+      style={Object {}}
+      viewBox="0 0 100 100"
+    >
+      <path
+        className="rc-progress-circle-trail"
+        d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+        fillOpacity="0"
+        stroke="#D9D9D9"
+        strokeLinecap="square"
+        strokeWidth={1}
+        style={
+          Object {
+            "stroke": "#D9D9D9",
+            "strokeDasharray": "225.30970943744057px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+      <path
+        className="rc-progress-circle-path"
+        d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+        fillOpacity="0"
+        key="0"
+        opacity={1}
+        stroke=""
+        strokeLinecap="square"
+        strokeWidth="6"
+        style={
+          Object {
+            "stroke": "#2db7f5",
+            "strokeDasharray": "67.59291283123217px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+    </svg>
+  </Circle>,
+  <br />,
+  <Circle
+    className=""
+    gapDegree={70}
+    gapPosition="bottom"
+    percent={30}
+    prefixCls="rc-progress"
+    strokeColor="#2db7f5"
+    strokeLinecap="square"
+    strokeWidth="6"
+    style={Object {}}
+    trailColor="#D9D9D9"
+    trailWidth={1}
+  >
+    <svg
+      className="rc-progress-circle"
+      style={Object {}}
+      viewBox="0 0 100 100"
+    >
+      <path
+        className="rc-progress-circle-trail"
+        d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+        fillOpacity="0"
+        stroke="#D9D9D9"
+        strokeLinecap="square"
+        strokeWidth={1}
+        style={
+          Object {
+            "stroke": "#D9D9D9",
+            "strokeDasharray": "225.30970943744057px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+      <path
+        className="rc-progress-circle-path"
+        d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+        fillOpacity="0"
+        key="0"
+        opacity={1}
+        stroke=""
+        strokeLinecap="square"
+        strokeWidth="6"
+        style={
+          Object {
+            "stroke": "#2db7f5",
+            "strokeDasharray": "67.59291283123217px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+    </svg>
+  </Circle>,
+  <Circle
+    className=""
+    gapDegree={70}
+    gapPosition="left"
+    percent={30}
+    prefixCls="rc-progress"
+    strokeColor="#2db7f5"
+    strokeLinecap="square"
+    strokeWidth="6"
+    style={Object {}}
+    trailColor="#D9D9D9"
+    trailWidth={1}
+  >
+    <svg
+      className="rc-progress-circle"
+      style={Object {}}
+      viewBox="0 0 100 100"
+    >
+      <path
+        className="rc-progress-circle-trail"
+        d="M 50,50 m -47,0
+   a 47,47 0 1 1 94,0
+   a 47,47 0 1 1 -94,0"
+        fillOpacity="0"
+        stroke="#D9D9D9"
+        strokeLinecap="square"
+        strokeWidth={1}
+        style={
+          Object {
+            "stroke": "#D9D9D9",
+            "strokeDasharray": "225.30970943744057px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+      <path
+        className="rc-progress-circle-path"
+        d="M 50,50 m -47,0
+   a 47,47 0 1 1 94,0
+   a 47,47 0 1 1 -94,0"
+        fillOpacity="0"
+        key="0"
+        opacity={1}
+        stroke=""
+        strokeLinecap="square"
+        strokeWidth="6"
+        style={
+          Object {
+            "stroke": "#2db7f5",
+            "strokeDasharray": "67.59291283123217px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+    </svg>
+  </Circle>,
+  <Circle
+    className=""
+    gapDegree={70}
+    gapPosition="right"
+    percent={30}
+    prefixCls="rc-progress"
+    strokeColor="#2db7f5"
+    strokeLinecap="square"
+    strokeWidth="6"
+    style={Object {}}
+    trailColor="#D9D9D9"
+    trailWidth={1}
+  >
+    <svg
+      className="rc-progress-circle"
+      style={Object {}}
+      viewBox="0 0 100 100"
+    >
+      <path
+        className="rc-progress-circle-trail"
+        d="M 50,50 m 47,0
+   a 47,47 0 1 1 -94,0
+   a 47,47 0 1 1 94,0"
+        fillOpacity="0"
+        stroke="#D9D9D9"
+        strokeLinecap="square"
+        strokeWidth={1}
+        style={
+          Object {
+            "stroke": "#D9D9D9",
+            "strokeDasharray": "225.30970943744057px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+      <path
+        className="rc-progress-circle-path"
+        d="M 50,50 m 47,0
+   a 47,47 0 1 1 -94,0
+   a 47,47 0 1 1 94,0"
+        fillOpacity="0"
+        key="0"
+        opacity={1}
+        stroke=""
+        strokeLinecap="square"
+        strokeWidth="6"
+        style={
+          Object {
+            "stroke": "#2db7f5",
+            "strokeDasharray": "67.59291283123217px 295.3097094374406px",
+            "strokeDashoffset": "-35px",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+          }
+        }
+      />
+    </svg>
+  </Circle>,
+]
+`;
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 4640e35..f40c1db 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -1,24 +1,10 @@
 /* eslint-disable react/no-render-return-value */
+// eslint-disable-next-line max-classes-per-file
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { mount } from 'enzyme';
 import { Line, Circle } from '../src';
 
-function getGradientIdFromDef(def) {
-  return def.firstElementChild.attributes.getNamedItem('id').value;
-}
-
 describe('Progress', () => {
-  let div = null;
-  beforeEach(() => {
-    div = document.createElement('div');
-    document.body.appendChild(div);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(div);
-    document.body.removeChild(div);
-  });
-
   describe('Line', () => {
     it('change with animation', () => {
       class Demo extends React.Component {
@@ -31,12 +17,12 @@ describe('Progress', () => {
           return <Line percent={percent} strokeWidth="1" />;
         }
       }
-      const line = ReactDOM.render(<Demo />, div);
-      expect(line.state.percent).toBe('0');
-      line.setState({
-        percent: '30',
-      });
-      expect(line.state.percent).toBe('30');
+
+      const line = mount(<Demo />);
+      expect(line.state().percent).toBe('0');
+      line.setState({ percent: '30' });
+      expect(line.state().percent).toBe('30');
+      line.unmount();
     });
   });
 
@@ -52,16 +38,15 @@ describe('Progress', () => {
           return <Circle percent={percent} strokeWidth="1" />;
         }
       }
-      const circle = ReactDOM.render(<Demo />, div);
-      expect(circle.state.percent).toBe('0');
-      circle.setState({
-        percent: '30',
-      });
-      expect(circle.state.percent).toBe('30');
+      const circle = mount(<Demo />);
+      expect(circle.state().percent).toBe('0');
+      circle.setState({ percent: '30' });
+      expect(circle.state().percent).toBe('30');
+      circle.unmount();
     });
 
     it('should gradient works and circles have different gradient IDs', () => {
-      ReactDOM.render(
+      const c = mount(
         <>
           <Circle
             percent={90}
@@ -82,16 +67,53 @@ describe('Progress', () => {
             }}
           />
         </>,
-        div,
       );
 
-      const gradientDefs = div.querySelectorAll('defs');
-      const idFirst = getGradientIdFromDef(gradientDefs[0]);
-      const idSecond = getGradientIdFromDef(gradientDefs[1]);
+      const gradientDefs = c.find('defs');
+      const idFirst = gradientDefs.at(0).props().children.props.id;
+      const idSecond = gradientDefs.at(1).props().children.props.id;
       const idRE = /^rc-progress-gradient-\d{1,}$/;
       expect(idFirst).toMatch(idRE);
       expect(idSecond).toMatch(idRE);
       expect(idFirst === idSecond).toBeFalsy();
     });
+
+    it('should show right gapPosition', () => {
+      const wrapper = mount(
+        <>
+          <Circle
+            percent={30}
+            gapDegree={70}
+            gapPosition="top"
+            strokeWidth="6"
+            strokeLinecap="square"
+          />
+          <br />
+          <Circle
+            percent={30}
+            gapDegree={70}
+            gapPosition="bottom"
+            strokeWidth="6"
+            strokeLinecap="square"
+          />
+          <Circle
+            percent={30}
+            gapDegree={70}
+            gapPosition="left"
+            strokeWidth="6"
+            strokeLinecap="square"
+          />
+          <Circle
+            percent={30}
+            gapDegree={70}
+            gapPosition="right"
+            strokeWidth="6"
+            strokeLinecap="square"
+          />
+        </>,
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });
diff --git a/tests/setup.js b/tests/setup.js
new file mode 100644
index 0000000..4c18e28
--- /dev/null
+++ b/tests/setup.js
@@ -0,0 +1,6 @@
+global.requestAnimationFrame = cb => setTimeout(cb, 0);
+
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/typings/index.d.ts b/typings/index.d.ts
deleted file mode 100644
index a4b3823..0000000
--- a/typings/index.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/* tslint:disable */
-declare module 'rc-progress' {
-  export interface RCProgressProps {
-    strokeWidth?: number;
-    trailWidth?: number;
-    className?: string;
-    percent?: number | number[];
-    strokeColor?: string | string[] | object;
-    trailColor?: string;
-    strokeLinecap?: 'butt' | 'square' | 'round';
-    prefixCls?: string;
-    style?: React.CSSProperties;
-    gapDegree?: number;
-    gapPosition?: 'top' | 'right' | 'bottom' | 'left';
-  }
-  export class Line extends React.Component<RCProgressProps, {}> {}
-  export class Circle extends React.Component<RCProgressProps, {}> {}
-}