学习单元测试

package.json

@@ -63,8 +63,6 @@
     "karma-spec-reporter": "0.0.23",
     "karma-webpack": "^1.7.0",    
     "mocha": "^2.3.4",
-    "phantomjs": "^1.9.19",
-    "phantomjs-polyfill": "0.0.1",
     "react-addons-test-utils": "^0.14.6",
     "sinon": "^1.17.2"
   },
@@ -73,7 +71,7 @@
     "lint": "eslint --ext .js,.jsx src",
     "start": "dora -p 8001 --plugins   \"webpack,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
     "test-antd": "atool-test-mocha ./src/**/__tests__/*-test.js",
-    "test": "mocha --compilers js:babel-register --recursive ./tests/test_helper.js",
+    "test":  "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive",
     "test:watch": "npm test -- --watch"
   }
 }

src/views/Demo/CommentList.js

+import React, { Component, PropTypes } from 'react';
+
+const propTypes = {
+  onMount: PropTypes.func.isRequired,
+  isActive: PropTypes.bool
+};
+
+class CommentList extends Component {
+  componentDidMount() {
+    this.props.onMount();
+  }
+
+  render() {
+    return (
+      <ul>
+        <li> Comment One </li>
+      </ul>
+    )
+  }
+}
+
+CommentList.propTypes = propTypes;
+export default CommentList;
\ No newline at end of file

test/containers/CommentList.spec.js

+import React from 'react';
+
+// Once we set up Karma to run our tests through webpack
+// we will no longer need to have these long relative paths
+import CommentList from '../../src/views/Demo/CommentList';
+import {
+  describeWithDOM,
+  mount,
+  shallow,
+  spyLifecycle
+} from 'enzyme';
+
+describe('(Component) CommentList', () => {
+
+  // using special describeWithDOM helper that enzyme
+  // provides so if other devs on my team don't have JSDom set up
+  // properly or are using old version of node it won't bork their test suite
+  //
+  // All of our tests that depend on mounting should go inside one of these
+  // special describe blocks
+  describeWithDOM('Lifecycle methods', () => {
+    it('calls componentDidMount', () => {
+      spyLifecyle(CommentList);
+
+      const props = {
+        onMount: () => {},  // an anonymous function in ES6 arrow syntax
+        isActive: false
+      }
+
+      // using destructuring to pass props down
+      // easily and then mounting the component
+      mount(<CommentList {...props} />);
+
+      // CommentList's componentDidMount should have been
+      // called once.  spyLifecyle attaches sinon spys so we can
+      // make this assertion
+      expect(
+        CommentList.prototype.componentDidMount.calledOnce
+      ).to.be.true;
+    });
+
+    it('calls onMount prop once it mounts', () => {
+      // create a spy for the onMount function
+      const props = { onMount: sinon.spy() };
+
+      // mount our component
+      mount(<CommentList {...props} />);
+
+      // expect that onMount was called
+      expect(props.onMount.calledOnce).to.be.true;
+    });
+  });
+});
\ No newline at end of file

tests/containers/Root.spec.js → test/containers/Root.spec.js

 import React from 'react';                     // required to get test to work.  we can get around this later with more configuration
 import { shallow } from 'enzyme';              // method from enzyme which allows us to do shallow render
-import Root from '../../views/Demo/Root';      // import our soon to be component
+import Root from '../../src/views/Demo/Root';      // import our soon to be component
+
+// describe('(Container) Root', () => {
+//   it('renders as a <div>', () => {
+//     const wrapper = shallow(<Root />);
+//     expect(wrapper.type()).to.eql('div');
+//   });
+
+//   it('has style with height 100%', () => {
+//     const wrapper = shallow(<Root />);
+//     const expectedStyles = {
+//       height: '100%',
+//       background: '#333'
+//     }
+//     expect(wrapper.prop('style')).to.eql(expectedStyles);
+//   });
+
+//   it('contains a header explaining the app', () => {
+//     const wrapper = shallow(<Root />);
+//     expect(wrapper.find('.welcome-header')).to.have.length(1);
+//   });
+// });
 
 describe('(Container) Root', () => {
-  it('renders as a <div>', () => {
   const wrapper = shallow(<Root />);
+
+  it('renders as a <div>', () => {
     expect(wrapper.type()).to.eql('div');
   });
 
   it('has style with height 100%', () => {
-    const wrapper = shallow(<Root />);
     const expectedStyles = {
       height: '100%',
       background: '#333'
@@ -18,7 +39,6 @@ describe('(Container) Root', () => {
   });
 
   it('contains a header explaining the app', () => {
-    const wrapper = shallow(<Root />);
     expect(wrapper.find('.welcome-header')).to.have.length(1);
   });
 });
\ No newline at end of file