React组件测试教程_JavaScript_CSS_下载.zip

This repo shows you how to test React component. It is loosely based on Jack Franklin's article ["Testing React Applications"](http://12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/).  ## Demo ```bash $ git clone https://github.com/ruanyf/react-testing-demo.git $ cd react-testing-demo && npm install $ npm start $ open http://127.0.0.1:8080 ``` Now, you visit http://127.0.0.1:8080/, and should see a Todo app.  There are 5 places to test. > 1. App's title should be "Todos" > 1. Initial state of a Todo item should be right ("done" or "undone") > 1. Click a Todo item, its state should be toggled (from "undone" to "done", or vice versa) > 1. Click a Delete button, the Todo item should be deleted > 1. Click the Add Todo button, a new Todo item should be added into the TodoList All [test cases](https://github.com/ruanyf/react-testing-demo/tree/master/test) have been written. You run `npm test` to find the test result. ```bash $ npm test ``` ## Index - [Testing Library](#testing-library) - [React official Test Utilities](#react-official-test-utilities) - [Shallow Rendering](#shallow-rendering) - [renderIntoDocument](#renderintodocument) - [findDOMNode](#finddomnode) - [Enzyme Library](#enzyme-library) - [shallow](#shallow) - [render](#render) - [mount](#mount) - [API List](#api-list) - [License](#license) ## Testing Library The most important tool of testing React is [official Test Utilities](https://facebook.github.io/react/docs/test-utils.html), but it only provides low-level API. As a result, some third-party test libraries are built based on it. Airbnb's [Enzyme library](https://github.com/airbnb/enzyme) is the easiest one to use among them. Thus every test case has at least two ways to write. > - Test Utilities' way > - Enzyme's way This repo will show you both of them. ## React official Test Utilities Since a component could be rendered into either a virtual DOM object (`React.Component`'s instance) or a real DOM node, [Test Utilities](https://facebook.github.io/react/docs/test-utils.html) library gives you two testing choices. > - **Shallow Rendering**: testing a virtual DOM object > - **DOM Rendering**: testing a real DOM node ### Shallow Rendering [Shallow Rendering](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) just renders a component "one level deep" without worrying about the behavior of child components, and returns a virtual DOM object. It does not require a DOM, since the component will not be mounted into DOM. At first, import the Test Utilities in your test case script. ```javascript import TestUtils from 'react-addons-test-utils'; ``` Then, write a Shallow Rendering function. ```javascript import TestUtils from 'react-addons-test-utils'; function shallowRender(Component) { const renderer = TestUtils.createRenderer(); renderer.render(<Component/>); return renderer.getRenderOutput(); } ``` In the code above, we define a function `shallowRender` to return a component's shallow rendering. The [first test case](https://github.com/ruanyf/react-testing-demo/blob/master/test/shallow1.test.js) is to test the title of `App`. It needn't interact with DOM and doesn't involve child-components, so is most suitable for use with shadow rendering. ```javascript describe('Shallow Rendering', function () { it('App\'s title should be Todos', function () { const app = shallowRender(App); expect(app.props.children[0].type).to.equal('h1'); expect(app.props.children[0].props.children).to.equal('Todos'); }); }); ``` You may feel `app.props.children[0].props.children` intimidating, but it is not. Each virtual DOM object has a `props.children` property which contains its all children components. `app.props.children[0]` is the `h1` element whose `props.children` is the text of `h1`. The [second test case](https://github.com/ruanyf/react-testing-demo/blob/master/test/shallow2.test.js) is to test the initial state of a `TodoItem` is undone. At first, we should modify the function `shallowRender` to accept second parameter. ```javascript import TestUtils from 'react-addons-test-utils'; function shallowRender(Component, props) { const renderer = TestUtils.createRenderer(); renderer.render(<Component {...props}/>); return renderer.getRenderOutput(); } ``` The following is the test case. ```javascript import TodoItem from '../app/components/TodoItem'; describe('Shallow Rendering', function () { it('Todo item should not have todo-done class', function () { const todoItemData = { id: 0, name: 'Todo one', done: false }; const todoItem = shallowRender(TodoItem, {todo: todoItemData}); expect(todoItem.props.children[0].props.className.indexOf('todo-done')).to.equal(-1); }); }); ``` In the code above, since [`TodoItem`](https://github.com/ruanyf/react-testing-demo/blob/master/app/components/TodoItem.jsx) is a child component of [`App`](https://github.com/ruanyf/react-testing-demo/blob/master/app/components/App.jsx), we have to call `shallowRender` function with `TodoItem`, otherwise it will not be rendered. In our demo, if the state of a `TodoItem` is undone, the `class` property (`props.className`) contains no `todo-done`. ### renderIntoDocument The second testing choice of official Test Utilities is to render a React component into a real DOM node. `renderIntoDocument` method is used for this purpose. ```javascript import TestUtils from 'react-addons-test-utils'; import App from '../app/components/App'; const app = TestUtils.renderIntoDocument(<App/>); ``` `renderIntoDocument` method requires a DOM, otherwise throws an error. Before running the test case, DOM environment (includes `window`, `document` and `navigator` Object) should be available. So we use [jsdom](https://github.com/tmpvar/jsdom) to implement the DOM environment. ```javascript import jsdom from 'jsdom'; if (typeof document === 'undefined') { global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.window = document.defaultView; global.navigator = global.window.navigator; } ``` We save the code above into [`test/setup.js`](https://github.com/ruanyf/react-testing-demo/blob/master/test/setup.js). Then modify `package.json`. ```javascript { "scripts": { "test": "mocha --compilers js:babel-core/register --require ./test/setup.js", }, } ``` Now every time we run `npm test`, `setup.js` will be required into test script to run together. The [third test case](https://github.com/ruanyf/react-testing-demo/blob/master/test/dom1.test.js) is to test the delete button. ```javascript describe('DOM Rendering', function () { it('Click the delete button, the Todo item should be deleted', function () { const app = TestUtils.renderIntoDocument(<App/>); let todoItems = TestUtils.scryRenderedDOMComponentsWithTag(app, 'li'); let todoLength = todoItems.length; let deleteButton = todoItems[0].querySelector('button'); TestUtils.Simulate.click(deleteButton); let todoItemsAfterClick = TestUtils.scryRenderedDOMComponentsWithTag(app, 'li'); expect(todoItemsAfterClick.length).to.equal(todoLength - 1); }); }); ``` In the code above, first, `scryRenderedDOMComponentsWithTag` method finds all `li` elements of the `app` component. Next, get out `todoItems[0]` and find the delete button from it. Then use `TestUtils.Simulate.click` to simulate the click action upon it. Last, expect the new number of all `li` elements to be less one than the old number. Test Utilities provides many methods to find DOM elements from a React component. > - [scryRenderedDOMComponentsWithClass](https://facebook.github.io/react/docs/test-utils.html#scryrendereddomcomponentswithclass): Finds all instances of components in the rendered tree that are DOM components with the class name matching className. > - [findRenderedDOMComponentWithClass](https://facebook.github.io/react/docs/test-utils.html#findrendereddomc