React使用Jest+Enzyme写Notification组件测试用例覆盖率低求助

现有测试的问题梳理 #

你当前的测试代码存在几个明显的问题，直接导致覆盖率偏低：

• 测试用例嵌套错误：你把多个it用例写在了第一个it的内部，外层的it执行完就结束了，内部的用例根本没有被正常执行
• 模拟逻辑没有对应实际业务：你对useSelector、useState的模拟都是孤立的，没有和组件内的实际取值、逻辑分支对应，也没有触发组件内的交互逻辑
• 用例逻辑无效：比如expect(wrapper.instance(openNotificationWithIcon))没有写断言条件，等于没有做校验；shallow渲染Provider不会实际渲染内部的Notification组件（shallow只渲染一层）

优化步骤 #

1. 先修正测试文件的基础结构 #

首先把嵌套的it用例全部移到describe的直接子层级，修复语法错误：

import React from 'react';
import Notification from '../Notification';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import * as redux from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../../Core/Reducers/index';
import renderer from 'react-test-renderer';

Enzyme.configure({ adapter: new Adapter() });
// 每个用例用独立的store，避免状态污染
const createTestStore = (preloadedState = {}) => createStore(rootReducer, preloadedState, applyMiddleware(thunk));

describe('Notification 组件测试', () => {
  // 每个用例执行前清空所有模拟
  afterEach(() => {
    jest.clearAllMocks();
  });

  // 所有it用例都放在该层级，不要嵌套
  it('基础渲染正常', () => {
    const store = createTestStore();
    const wrapper = mount(<Provider store={store}><Notification /></Provider>);
    expect(wrapper.find(Notification).exists()).toBeTruthy();
  });
});

2. 按覆盖率缺失的分支补充用例 #

覆盖率低本质是没有覆盖组件里的所有条件分支、函数执行，你可以按照覆盖率报告的标记逐点补充：

• 针对useSelector返回的不同状态：你之前只模拟了返回drafts的情况，还要模拟返回其他枚举值的情况，覆盖组件里对应的if/else分支
• 针对useState的状态更新：模拟用户点击、切换等交互，触发对应的setState逻辑，校验状态更新后组件的渲染结果是否符合预期
• 针对openNotificationWithIcon这类工具函数：模拟触发通知的条件，校验函数是否被调用，调用参数是否符合预期

3. 补充交互逻辑测试 #

不要只测渲染结果，还要测组件响应用户操作的逻辑：比如点击通知卡片是否跳转、切换分类是否更新列表、关闭通知是否触发状态更新，这些逻辑跑通后覆盖率会快速上升。

注意事项 #

• 测试组件本身时建议用mount而不是shallow，可以完整渲染组件的所有子节点，真实触发生命周期和hooks逻辑
• 不要模拟所有的useState，优先通过触发实际交互来更新状态，更符合真实使用场景
• 每个it用例只测一个逻辑点，不要把多个校验放在同一个用例里，出现问题更容易定位

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