如何在Jest单元测试中优化React组件Mock Props的变量声明

解决方案 #

你设想的建造者模式是非常合适的实现方案，同时也可以搭配更轻量的工厂函数快速生成模拟数据，以下是两种常用的落地方式：

方案1：实现自定义Builder类 #

完全匹配你想要的调用方式，还支持按需覆盖默认值，适配不同测试场景：

class StyleOptionBuilder {
  // 先定义默认模拟值，直接内置通用的假数据
  private styleOption: Partial<StyleOption> = {
    number: 'default-style-001',
    name: '默认款式',
    color: {
      pantone: '16-1546 TCX',
      hex: '#E63946',
      basic: '红色'
    } as Color,
    eaNs: ['6901234567890'],
    assets: [
      {
        perspective: {
          number: 'p-001',
          name: '正面',
          assetType: 'image'
        } as Perspective,
        file: {
          extension: 'png',
          name: 'front-view.png',
          size: 102400,
          createdOn: new Date('2024-01-01'),
          modifiedOn: new Date('2024-01-02'),
          storageUrl: 'https://mock-assets.com/front.png'
        } as File,
        channel: 'all'
      }
    ] as Asset[]
  }

  // 可选：链式调用方法，方便单独修改某个字段
  withNumber(num: string) {
    this.styleOption.number = num
    return this
  }

  withColor(color: Partial<Color>) {
    this.styleOption.color = { ...this.styleOption.color, ...color }
    return this
  }

  // 生成最终实例，支持传入自定义配置直接覆盖任意字段
  build(custom: Partial<StyleOption> = {}): StyleOption {
    return { ...this.styleOption, ...custom } as StyleOption
  }
}

// 可以提前导出一个单例，不用每次都new
export const styleOptionBuilder = new StyleOptionBuilder()

使用方式完全符合你的预期，还支持自定义覆盖：

// 用默认值
const mockIStyleDetailsProps: IStyleDetailsProps = {
  currentStyleOption: styleOptionBuilder.build(), 
  styleName: fakeStyleName,
  styleOptionNumber: fakeStyleOptionNumber,
  brandName: fakeBrandName,
  description: fakeDescription
};

// 需要特殊值的场景，直接传入覆盖即可
const mockWithBlueColor = styleOptionBuilder.build({
  color: { pantone: '19-4052 TCX', hex: '#1D3557', basic: '蓝色' }
})

方案2：轻量工厂函数（更适合简单场景） #

如果不需要链式调用的复杂能力，直接写一个返回默认模拟值的函数即可，代码更简洁：

export function createMockStyleOption(custom?: Partial<StyleOption>): StyleOption {
  return {
    number: 'default-style-001',
    name: '默认款式',
    color: {
      pantone: '16-1546 TCX',
      hex: '#E63946',
      basic: '红色'
    } as Color,
    eaNs: ['6901234567890'],
    assets: [
      {
        perspective: {
          number: 'p-001',
          name: '正面',
          assetType: 'image'
        } as Perspective,
        file: {
          extension: 'png',
          name: 'front-view.png',
          size: 102400,
          createdOn: new Date('2024-01-01'),
          modifiedOn: new Date('2024-01-02'),
          storageUrl: 'https://mock-assets.com/front.png'
        } as File,
        channel: 'all'
      }
    ] as Asset[],
    ...custom
  } as StyleOption
}

使用方式：

const currentStyleOption = createMockStyleOption()
// 自定义覆盖
const customStyleOption = createMockStyleOption({ name: '夏季新款T恤' })

额外优化建议 #

如果模拟数据量大，可以搭配@faker-js/faker库自动生成随机假数据，不用手动写死默认值，生成的测试数据更真实。你可以把所有类型的模拟工厂都统一放在test/fixtures目录下，所有测试用例都可以复用，不用重复编写模拟代码。

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