Merge pull request #3771 from ant-design/improve-testing

Introduce jest snapshots

package.json

@@ -92,6 +92,7 @@
     "dora-plugin-upload": "^0.3.1",
     "enquire.js": "^2.1.1",
     "enzyme": "^2.6.0",
+    "enzyme-to-json": "^1.3.0",
     "es6-shim": "^0.35.0",
     "eslint": "^3.0.1",
     "eslint-config-airbnb": "latest",
@@ -102,6 +103,7 @@
     "eslint-plugin-react": "^6.1.2",
     "eslint-tinker": "^0.4.0",
     "history": "^4.4.0",
+    "jest": "^17.0.1",
     "jest-cli": "^17.0.0",
     "jsonml-to-react-component": "~0.2.0",
     "jsonml.js": "^0.1.0",
@@ -111,9 +113,9 @@
     "moment-timezone": "^0.5.5",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
+    "rc-queue-anim": "~0.12.4",
     "rc-scroll-anim": "~0.5.0",
     "rc-tween-one": "~0.11.0",
-    "rc-queue-anim": "~0.12.4",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-copy-to-clipboard": "^4.0.1",

tests/__snapshots__/button.test.js.snap

@@ -0,0 +1,19 @@
+exports[`Button renders Chinese characters correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button">
+  <span>
+    按 钮
+  </span>
+</button>
+`;
+
+exports[`Button renders correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button">
+  <span>
+    Follow
+  </span>
+</button>
+`;

tests/button.test.js

@@ -1,31 +1,20 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import { render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
 import Button from '../components/button/button';
 
 describe('Button', function() {
-  let button;
-  let buttonNode;
-
-  beforeEach(() => {
-    button = TestUtils.renderIntoDocument(
+  it('renders correctly', () => {
+    const wrapper = render(
       <Button>Follow</Button>
     );
-    buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
+    expect(renderToJson(wrapper)).toMatchSnapshot();
   });
 
-  it('should set the type to button by default', () => {
-    expect(buttonNode.type).toBe('button');
-  });
-
-  it('should set the default className to button', () => {
-    expect(buttonNode.className).toBe('ant-btn');
-  });
-
-  it('should has a whitespace in two Chinese characters', () => {
-    button = TestUtils.renderIntoDocument(
+  it('renders Chinese characters correctly', () => {
+    const wrapper = render(
       <Button>按钮</Button>
     );
-    buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
-    expect(buttonNode.textContent).toBe('按 钮');
+    expect(renderToJson(wrapper)).toMatchSnapshot();
   });
 });