在Jest中能否定义通用React组件实例简化Enzyme重复测试代码

结论 #

你提出的简化思路是可行的，但需要修正命名冲突问题，同时更推荐使用beforeEach封装渲染逻辑的写法来避免测试污染。

注意事项 #

• 你给出的示例代码存在变量名与组件重名的问题：const CartItem = <CartItem drilledProps={{ ...mockProps }} />会覆盖当前作用域下原有的CartItem组件引用，运行时会报错，需要将变量修改为其他名称（如mockCartItemEl）。
• 直接复用固定React元素的写法仅适用于测试过程中不需要修改组件Props、不需要隔离实例状态的场景。如果某一个测试用例修改了组件状态或者传入了特殊Props，会影响其他测试用例的运行结果。

更推荐的实现方案 #

使用Jest提供的beforeEach生命周期钩子，为每一个测试用例生成全新的渲染实例，既可以减少重复代码，又能保证测试用例之间完全隔离：

describe('<CartItem />', () => {
  let wrapper;
  // 可根据测试需求灵活调整mockProps
  const mockProps = { /* 你的测试模拟属性 */ };

  beforeEach(() => {
    wrapper = shallow(<CartItem drilledProps={{ ...mockProps }} />);
  });

  it('is a reusable component that renders cart items', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('renders once', () => {
    expect(wrapper.length).toEqual(1);
  });
})

修正后的复用元素写法 #

如果你确实需要直接复用固定Props的React元素，可参考以下修正后的代码：

describe('<CartItem />', () => {
  // 变量名不要和组件重名，避免作用域覆盖
  const CartItemElement = <CartItem drilledProps={{ ...mockProps }} />;

  it('is a reusable component that renders cart items', () => {
    expect(shallow(CartItemElement)).toMatchSnapshot();
  });

  it('renders once', () => {
    expect(shallow(CartItemElement).length).toEqual(1);
  });
})

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