React快速上手开发

lint

、

Flow

、测试与复验

｜

157

这时你的测试就可以成功通过了。

当一个测试的执行不正常时，你可能需要知道实际生成的

HTML

结构是什

么。一个快速简便的方法就是使用

console.log(node.outerHTML)

，让

HTML

内容在控制台中输出。

7.4.5

　测试

<Actions>

组件

<Actions>

组件也是一个无状态组件，这意味着你需要把它包裹在另一层

DOM

节点中，以

便随后进行检查。一种方式是像前面对

<Button>

组件所做的那样，将其包裹在

div

中并通

过以下方式访问：

const actions = TestUtils.renderIntoDocument(

<div><Actions /></div>

);

ReactDOM.findDOMNode(actions).children[0]; // <Actions>组件的根节点

1.

组件包裹层

另一种方式是使用组件包裹层，以方便你随后使用

TestUtils

提供的各种方法寻找需要检

查的节点。

这个包裹层非常简单，可以定义在一个模块中，方便以后重用：

import React from 'react';

class Wrap extends React.Component {

render() {

return <div>{this.props.children}</div>;

}

}

export default Wrap

接下来编写测试模板：

jest

.dontMock('../source/components/Actions') ...