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

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 而不是 false，所以 <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

这就是 && 的工作原理。它returns第一个伪操作数

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

因此它在您的 div 中呈现“0”文本节点，因为 0 是假的。

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

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

Why does test for Conditional Rendering not fail?

reactjs

enzyme