您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　8.3.5 被连接的React组件测试

　　如果将应用状态存放在Redux Store上，配合使用react-redux库，所有有状态的React组件都是通过connect函数产生的组件，被称为“被连接的组件”。

　　以第5章的todo_with_selector/src/todos/views/todoList.js为例，这是一个被链接的组件，在todo_with_selector/test/todos/views/todoList.test.js文件中可以看到全部单元测试代码。

　　TodoList这样一个组件依赖于一个Redux Store实例，而且能够实实在在地提供内容，所以不再使用redux-mock-store，而是使用一个货真价实的Redux Store，需要创造一个store，代码如下：

　　const store = createStore(

　　combineReducers({

　　todos: todosReducer,

　　filter: filterReducer

　　}), {

　　todos: [],

　　filter: FilterTypes.ALL

　　});

　　为了将这个Store放在React Context，还需要创造Provider，使用Enzyme的mount方法渲染的是Provider包裹起来的TodoList组件，代码如下：

　　const subject = (

　　);

　　const wrapper = mount(subject);

　　最终，通过调用store.dispatch函数派发action，然后就可以验证wrapper对象上的渲染元素是否发生了预期改变：

　　store.dispatch(actions.addTodo('write more test'));

　　expect(wrapper.find('.text').text()).toEqual('write more test');

　　这个单元测试中，我们想要模拟一次完整的action对象处理周期，派发出一个add-Todoaction对象之后，应该在DOM树中存在对应的待办事项文字，待办事项文字存在于TodoItem组件中。为了检查DOM中的文字，就需要用mount函数而不是shallow函数。

　　上面创造Provider的过程看起来有一点麻烦，主要是因为TodoList组件还包含了TodoItem组件也是连接到Store的组件，如果被测试组件并不包含任何其他链接到Store的子组件，那就可以直接在组件渲染中用名为store的prop。

　　例如，对于TodoItem组件的单元测试，就可以在JSX中直接这样写，不用Provider：

　　const subject = ;

　　const wrapper = mount(subject); 深入浅出React和Redux