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

这就是&&的工作原理。它返回第一个假操作数

＆＃13;

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

＆＃13;

所以它呈现了＆＃39; 0＆＃39;你的div中的文本节点因为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>');
});

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

1 个答案: