如何避免React单元测试时对mock对象的未识别属性抛出警告

方案1：测试环境全局过滤警告（无生产代码侵入） #

直接在jest的全局启动文件中重写console.warn，过滤掉包含jest mock特有属性的React未知prop警告，该逻辑仅在测试环境生效，完全不影响生产代码。
配置步骤：

• 找到jest配置中setupFilesAfterEnv指定的入口文件（无则新增该配置）
• 插入以下代码：

const originalWarn = console.warn.bind(console)
console.warn = (...args) => {
  const mockPropKeywords = [
    '_isMockFunction', 
    'getMockImplementation', 
    'mockClear', 
    'mockReset', 
    'mockRestore'
  ]
  const needIgnore = args.some(arg => 
    typeof arg === 'string' && mockPropKeywords.some(key => arg.includes(key))
  )
  if (!needIgnore) {
    originalWarn(...args)
  }
}

方案2：创建不可枚举mock属性的安全mock #

jest mock的特有属性默认是可枚举的，被对象展开操作带入props时就会触发React警告，你可以封装专属的mock工具函数，将jest特有属性设为不可枚举，既保留所有mock能力，又不会产生多余属性。
工具函数示例：

import { mock } from 'jest-mock-extended'

// 安全封装jest-mock-extended的mock方法
export function createSafeMock() {
  const mockInstance = mock()
  const jestPrivateProps = [
    '_isMockFunction', 
    'getMockImplementation', 
    'mockClear', 
    'mockReset', 
    'mockRestore'
  ]
  jestPrivateProps.forEach(prop => {
    if (Object.prototype.hasOwnProperty.call(mockInstance, prop)) {
      Object.defineProperty(mockInstance, prop, { enumerable: false })
    }
  })
  return mockInstance
}

// 安全封装jest.fn()
export function createSafeMockFn(implementation) {
  const mockFn = jest.fn(implementation)
  Object.defineProperty(mockFn, '_isMockFunction', { enumerable: false })
  return mockFn
}

后续测试中直接使用createSafeMock和createSafeMockFn代替原有的mock方法即可。

方案3：测试用例侧精简传入的props #

如果你的场景是测试时传入了全量mock对象，但组件实际只用到少数属性，可以在构造测试props时仅传入逻辑依赖的属性，避免多余的mock属性进入组件透传到DOM节点。

替代实现建议 #

如果你的测试不需要校验mock的调用次数、参数等mock专属能力，直接使用普通匿名函数、空对象作为桩数据即可，不需要创建完整的jest mock对象，从根源上避免该问题。

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