如何用玩笑优化单元测试中的变量声明？答案

【问题标题】：How to optimize variable declaration in unit tests with jest?如何用玩笑优化单元测试中的变量声明？
【发布时间】：2023-03-11 14:30:01
【问题描述】：

我有一个包含多个组件的 React 应用程序，每个组件都有自己的相应测试。问题是多个测试需要道具中的假元素，这可能会有点混乱：

const mockIStyleDetailsProps: IStyleDetailsProps = {
  currentStyleOption: {
    number: fakeStyleNumber,
    name: fakeStyleOptionName,
    color: {
      pantone: fakePantone,
      hex: fakeHex,
      basic: fakeBasic,
    } as Color,
    eaNs: fakeEANs,
    assets: [
      {
        perspective: {
          number: fakeNumber,
          name: fakePerspectiveName,
          assetType: fakeAssetType,
        } as Perspective,
        file: {
          extension: fakeExtention,
          name: fakeAssetName,
          size: fakeAssetSizeNumber,
          createdOn: Date,
          modifiedOn: Date,
          storageUrl: fakeStorageUrl,
        } as File,
        channel: fakeChannel,
      },
    ] as Asset[],
  } as StyleOption,
  styleName: fakeStyleName,
  styleOptionNumber: fakeStyleOptionNumber,
  brandName: fakeBrandName,
  description: fakeDescription
};

有没有更方便的方式将上面的props声明成相同的属性？

我想StyleOption 可以以某种方式使用一些默认值构建，这样我就可以在如下测试中使用它：

const mockIStyleDetailsProps: IStyleDetailsProps = {
  currentStyleOption: StyleOptionBuilder.build(), 
  styleName: fakeStyleName,
  styleOptionNumber: fakeStyleOptionNumber,
  brandName: fakeBrandName,
  description: fakeDescription
};

提前感谢您的任何建议。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

一个好的方法是创建一个 mockCreator 函数，该函数默认为您的 mock，但可以返回修改后的值。然后你用它来构建你的树：

const mockIStyleDetailsProps: IStyleDetailsProps = {
  currentStyleOption: StyleOptionBuilder.build(), 
  styleName: fakeStyleName,
  styleOptionNumber: fakeStyleOptionNumber,
  brandName: fakeBrandName,
  description: fakeDescription
};

export const IStyleDetailsPropsMockCreator = (partial: Partial<IStyleDetailsProps>) => Object.assign({}, mockIStyleDetailsProps, partial;

您以后可以在其他模拟中使用此模拟创建器：

import { IStyleDetailsPropsMockCreator } from './IStyleDetailsPropsMockCreator'

export const newMock: INewMock = {
  iStyleDetailsProps: IStyleDetailsPropsMockCreator({brandName: 'test'})
}

export const newMockMockCreator = (partial: Partial<INewMock>) =>
    Object.assign({}, newMock, partial)

并像这样使用它：

const newestMock = newMockMockCreator({
  iStyleDetailsProps: IStyleDetailsPropsMockCreator({brandName: 'someotherbrand'})
});

那么最好创建一个 createMockCreator 函数：

export createMockCreator<T>(defaultState: T) => 
  (partial: Partial<T>) => Object.assign({}, defaultState, partial);

【讨论】：