Warum schlägt der Test für bedingtes Rendern nicht fehl?

Question

ich ein Typoskript haben reagieren Komponente, dass keine Nummer zeigen sollte, wenn sie nicht definiert oder gleich Null ist:

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> 
     ); 
    } 
} 

Die Komponente hat einen Bug, dass es die 0. Bei der 0 wir im Browser zeigt bekam 0 && false das ist 0 und nicht falsch, so dass die <div> mit der Nummer im Browser gerendert wird. Es musste this.props.number !== undefined && this.props.number > 0 && ... sein.

Diese Komponente hat einen Mokka-Test mit Enzymen seicht:

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); 
    }); 
}); 

Diese Tests sind alle Erfolg. Warum schlägt der zweite Test nicht fehl, wenn der Browser die 0 anzeigt?

Answer 1

So funktioniert && funktioniert. Es gibt ersten falsy Operanden

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

es '0' Textknoten in Ihrem div So macht denn 0 falsy ist.

<div>0</div> 

Aber Ihre Testprüfung für innere div.number, die nicht vorhanden ist.

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

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