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

　　8.3.4 无状态React组件测试

　　对于一个无状态的React组件，可以使用Enzyme的shallow方法来渲染，因为shallow方法只渲染一层，所以不会牵涉子组件的React组件渲染，将单元测试专注于被测试的React组件本身。

　　以第5章todo_with_selector/src/filter/views/filters.js为例，对于这样的无状态组件，单元测试代码放在todo_with_selector/test/filter/views/filters.test.js中，代码如下：

　　describe('filters', () => {

　　it('should render three link', () => {

　　const wrapper = shallow();

　　expect(wrapper.contains( {FilterTypes.ALL} )).toBe(true);

　　expect(wrapper.contains( {FilterTypes.COMPLETED} )).toBe(true);

　　expect(wrapper.contains( {FilterTypes.UNCOMPLETED} )).toBe(true);

　　});

　　});

　　习惯上，把Enzyme函数渲染的结果命名为wrapper，对wrapper可以使用contains函数判断是否包含某个子组件。在这里，shallow并没有渲染产生子组件Link的DOM元素，所以完全可以用contains来判断是否包含Link组件。

　　这种单元测试不深入渲染React子组件，主要的意义是可以简化测试过程，因为React子组件的完全渲染可能引入其他的依赖关系。

　　设想一下，有一个Parent组件，只是一个和Redux无关的无状态组件，Parent包含一个Child组件，但是Child组件通过react-redux连接到了Redux Store上。那么，如果在测试Parent组件时要渲染Child组件，那就必须创造一个Store对象，还要用Provider创造一个Context。创造这样的环境，对测试Parent组件本身没有任何帮助，但是如果使用shallow浅层渲染，只要在渲染过程中知道创造了Child组件，传递给Child的prop都对，这就足够了，至于Child功能是否正确，那就交给Child的单元测试去验证，不是Parent单元测试的责任。 深入浅出React和Redux