如何使用Jest和Enzyme测试函数组件内依赖isAuthorized的if条件逻辑

错误原因说明 #

• 你传入的shouldshow props不生效：组件内部的shouldShow变量是直接调用导入的isAuthorized方法生成的，并没有读取props中的对应字段
• 从wrapper.instance()获取isAuthorized的方法不可行：isAuthorized是从外部模块导入的方法，不属于组件实例的属性，且普通函数组件本身不存在可以读取内部方法的实例对象

正确实现方式 #

直接mock你导入的xxx模块的导出即可，步骤如下：

1. 在测试文件顶部声明mock对应模块

// 先mock模块，jest会替换所有导入的xxx模块内容
jest.mock('xxx', () => ({
  isAuthorized: jest.fn()
}))

// 之后再导入依赖
import { isAuthorized } from 'xxx';
import Comp from './你的组件文件路径';

2. 编写测试用例，按需修改isAuthorized的返回值即可覆盖两种分支场景

describe('Comp 组件权限渲染逻辑测试', () => {
  // 每次测试前清空mock调用记录
  beforeEach(() => {
    isAuthorized.mockClear();
  })

  it('权限校验通过时渲染A组件', () => {
    //  mock返回值为true
    isAuthorized.mockReturnValue(true);
    const wrapper = getShallowWrapper({}); // 不需要传额外无效props
    expect(wrapper.find('A').exists()).toBe(true);
    // 可额外校验参数传递正确
    expect(isAuthorized).toHaveBeenCalledWith('abcd');
  })

  it('权限校验不通过时渲染B组件', () => {
    // mock返回值为false
    isAuthorized.mockReturnValue(false);
    const wrapper = getShallowWrapper({});
    expect(wrapper.find('B').exists()).toBe(true);
  })
})

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