React组件快照测试失败：如何修改代码通过测试？

问题分析 #

当前快照测试失败，核心原因有两个：一是直接将Enzyme的ReactWrapper对象传给toMatchSnapshot()，该对象无法被Jest正确序列化生成快照；二是你定义的ProspectState未注入组件，若SignIn依赖Redux状态，会导致组件渲染异常。

具体修改步骤 #

1. 调整快照断言的目标对象 #

不要直接断言wrapper，改用wrapper.html()获取组件的HTML字符串，或者wrapper.render()生成可序列化的渲染结果：

it("should match snapshot", () => { 
    expect(wrapper.html()).toMatchSnapshot();
    // 也可以用render方法：
    // expect(wrapper.render()).toMatchSnapshot();
})

2. 移除无用代码 #

beforeEach里的shallow(<SignIn />);未赋值给变量，属于无效代码，直接删除：

beforeEach(() => {
    wrapper = mount(<BrowserRouter><SignIn /></BrowserRouter>);
})

3. 注入组件依赖的状态（若SignIn使用Redux） #

如果SignIn依赖Redux的ProspectState，需要用mock store包裹组件，先安装依赖：

npm install redux-mock-store --save-dev

再修改测试代码：

import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';

const mockStore = configureMockStore();
const store = mockStore({ ProspectState });

beforeEach(() => {
    wrapper = mount(
        <Provider store={store}>
            <BrowserRouter><SignIn /></BrowserRouter>
        </Provider>
    );
})

4. 简化类型定义 #

wrapper的类型可以简化，无需复杂泛型：

let wrapper: ReactWrapper;

修改后的完整测试代码 #

import { mount, ReactWrapper } from 'enzyme';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import SignIn from './SignIn';

const mockStore = configureMockStore();

describe("Testing signIn component", () => {
    let wrapper: ReactWrapper;

    const ProspectState = {
        prospectSignInError: "",
        prospectSignInSuccess: ""
    }

    beforeEach(() => {
        const store = mockStore({ ProspectState });
        wrapper = mount(
            <Provider store={store}>
                <BrowserRouter><SignIn /></BrowserRouter>
            </Provider>
        );
    })

    it("should match snapshot", () => { 
        expect(wrapper.html()).toMatchSnapshot();
    })
})

内容的提问来源于stack exchange，提问作者Ritika