分配给新变量后如何测试道具

Posted 2023-02-22

【中文标题】分配给新变量后如何测试道具

【英文标题】：How to test props after being assigned to new variable

【发布时间】：2019-09-10 03:22:17

【问题描述】：

我正在尝试使用道具测试if 条件。如果我传入this.props.thingToTest，它可以正常工作，但如果我分配类似const propsVariable = this.props.thingToTest 的内容并测试if 条件，我将无法获得代码覆盖率。

我尝试在我的浅层包装器中将 const 作为 props 传递，或者在测试中声明 const 但它仍然看不到它。

组件代码：

render() 
    const propsVariable = this.props.thingToTest;

    if (this.props.otherThingToTest === 'test') 
      return <Component />;
     else 
      if (propsVariable) 
        return <OtherComponent />;
      
    
  

测试代码：

const props = 
  propsVariable: 


it('tests else condition in render method', () => 
    const wrapper = shallow(<OriginalComponent ...props />);
    const instance = wrapper.instance();
    jest.spyOn(instance, 'render');
    instance.render();
    expect(instance.render).toHaveBeenCalled();
  );

我希望 else 案例会受到打击并返回 <OtherComponent />，但它根本不会打击 else 案例。

如果我在测试中将 otherThingToTest 放入 props 对象中，它会命中第一个 if 案例，但因为我的另一个 prop thingToTest 已分配给变量，它不会命中 else 案例我不确定如何测试它。

【参考方案1】：

由于您没有在测试代码中将thingToTest 属性传递给组件，因此propsVariable 将被分配未定义。

const propsVariable = this.props.thingToTest; // propsVariable = undefined

这就是为什么代码不会采用else 块内的if 路径，因此不会覆盖return <OtherComponent />; 语句。

因此，您只需将 thingToTest 属性传递给测试代码中的组件，它就可以正常工作。

const props = 
  thingToTest: 'someValue'
  // passing propsVariable:  won't work
  // since it will be available as 
  // "this.props.propsVariable" inside the 
  // component 

注意：如果你不通过otherThingToTest props，else case 将会命中。