为什么测试条件渲染不会失败？

Question

我有一个打字稿反应部件，这不应该表现出许多，如果它是未定义的或零：

import * as React from "react"; 

export class NoZero extends React.Component<{ number?: number }, {}> { 
    render() { 
     return (
      <div> 
       {this.props.number && this.props.number > 0 && <div className="number">{this.props.number}</div>} 
      </div> 
     ); 
    } 
} 

该组件具有一个Bug，它示出了在浏览器中的0。在0我们的情况下得到了0 && false，这是0而不是假，因此带编号的<div>在浏览器中呈现。它必须是this.props.number !== undefined && this.props.number > 0 && ...。

该组件带有酶浅摩卡测试：

import { expect } from "chai"; 
import "mocha"; 
import * as React from "react"; 
import { shallow } from "enzyme"; 
import { NoZero } from "./NoZero"; 

describe("NoZero",() => { 
    it("should show not undefined",() => { 
     const wrapper = shallow(<NoZero number={undefined} />); 

     expect(wrapper.find(".number")).to.have.length(0); 
    }); 

    it("should not show '0'",() => { 
     const wrapper = shallow(<NoZero number={0}/>); 

     expect(wrapper.find(".number")).to.have.length(0); 
    }); 

    it("should show other numbers",() => { 
     const wrapper = shallow(<NoZero number={2} />); 

     expect(wrapper.find(".number")).to.have.length(1); 
    }); 
}); 

这种测试都成功。为什么第二个测试不会失败，如果浏览器显示0？

Answer 1

这是&&如何工作。它返回第一falsy操作

console.log(0 && true) 
 
console.log(true && 0)

所以它呈现您的DIV中 '0' 的文本节点，因为0是falsy。

<div>0</div> 

但你的测试检查内div.number这是缺席。

it("should not show '0'",() => { 
    const wrapper = shallow(<NoZero number={0}/>); 

    // should fail 
    expect(wrapper.html()).to.equal('<div></div>'); 
});