11-更新测试

11.2.4　更新测试

当将Home组件转换到React时，会破坏以前为它写的测试。现在将进行修复。幸运的是，现在大部分测试逻辑应该放在其他地方，因此如果可能，这些测试应该比它们以前更简单。代码清单11-13展示了Home组件更新后的测试文件。

代码清单11-13　更新Home组件的测试（src/containers/Home.test.js）

jest.mock('mapbox');  ⇽--- 模拟Mapbox，因为CreateComment会尝试使用它，从react-test-renderer中导入renderer
import React from 'react';
import renderer from 'react-test-renderer';  ⇽--- 模拟Mapbox，因为CreateComment会尝试使用它，从react-test-renderer中导入renderer
import { Provider } from 'react-redux';
import { Home, mapStateToProps, mapDispatchToProps } from
     '../../src/pages/home';  ⇽--- 用一些帖子创建初始状态
import configureStore from '../../src/store/configureStore';
import initialState from '../../src/constants/initialState';
const now = new Date().getTime();  ⇽--- 用一些帖子创建初始状态
describe('Single post page', () => {
    const state = Object.assign({}, initialState, {  ⇽--- 用一些帖子创建初始状态
        posts: {
            2: { content: 'stuff', likes: [], date: now },
            1: { content: 'stuff', likes: [], date: now }
        },
        postIds: [1, 2]
    });
    const store = configureStore(state);  ⇽--- 用初始状态来创建一个store
    test('mapStateToProps', () => {  ⇽--- 测试mapStateToProps，断言特定的状态会产生正确的props
        expect(mapStateToProps(state)).toEqual({
            posts: [
                { content: 'stuff', likes: [], date: now },
                { content: 'stuff', likes: [], date: now }
            ]
        });
    });
    test('mapDispatchToProps', () => {  ⇽--- 断言mapDispatchToProps函数拥有所有正确属性
        const dispatchStub = jest.fn();
        const mappedDispatch = mapDispatchToProps(dispatchStub);
        expect(mappedDispatch.actions.createNewPost).toBeDefined();
        expect(mappedDispatch.actions.getPostsForPage).toBeDefined();
        expect(mappedDispatch.actions.showComments).toBeDefined();
        expect(mappedDispatch.actions.createError).toBeDefined();
        expect(mappedDispatch.actions.getNextPageOfPosts).toBeDefined();
    });
    test('should render posts', function() {  ⇽--- 执行快照测试来断言组件的输出不会改变
        const props = {
            posts: [
                { id: 1, content: 'stuff', likes: [], date: now },
                { id: 2, content: 'stuff', likes: [], date: now }
            ],
            actions: {
                getPostsForPage: jest.fn(),
                createNewPost: jest.fn(),
                createError: jest.fn(),
                showComments: jest.fn()
            }
        };
        const component = renderer.create(
            <Provider store={store}>
                <Home {...props} />
            </Provider>
        );
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();  ⇽--- 执行快照测试来断言组件的输出不会改变
    });
});