// 导入相关的包

import React from 'react'; import { shallow } from 'enzyme'; import { expect } from 'chai'; // 导入要测试的组件 import App from '../src/components/App'; // 测试用例，描述你的需求，测试什么样的功能，期望达到什么样的效果 describe('<App />', () => { it('App should have a div tag', () => { // it就是一个测试用例，'App should have a div tag'就是这个测试用例的名字。 const wrapper = shallow(<App />); // 通过shallow方法可以把组件渲染成一个对象，wrapper就是这个对象。 expect(wrapper.find('div')).to.have.length(1); // 通过expect断言库来断定wrapper中是否有div标签。如果有则表明我们写出来的代码正确无误。如果不正确则会出错。 }); // 这里表明了我希望在<App/>组件中应当存在一个div标签。如果不存在则会失败（即断定不通过）。 it('should render children when passed in', () => { // 第二个测试用例, 测试当传入子元素时, 是否能正常render出来? const wrapper = shallow(( // 同上, 先将要测试的React Component 渲染出来, 返回一个对象: wrapper; <App> // 现在我们加入了子元素: <h2>Hello</h2>; <h2>Hello</h2> // 这里可能会问, 为啥要加上()? 这里实际上并没有必要加上(), 加上()只是ES6中内嵌JSX表达式时必须使用(). https://babeljs.io/docs/plugins/transform-react-jsx/#es6-classes-and-stateless-functional-components https://stackoverflow.com/questions/30372297/why-are-parentheses-required-for-arrow-function-expressions https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#%E5%87%BD%E6%95%B0%E7%AC%A6%E5%8F