为什么tsc会生成一个名称为空的React组件？

Question

我正在尝试将React项目从Javascript切换到Typescript，作为第一步，我想使用tsc而不是babel来转换我的Javascript。然而，当我这样做的时候，我得到了失败的测试:如果我用浅包装器呈现组件，在它上调用.text()会得到一个使用tsc而不是使用babel的空白标记。类似地，在使用tsc运行时，调用wrapper.find("Bah")不会找到任何组件，但在使用babel时可以正常工作。

我的代码：

Foo.js

import {Bah} from "./Bah";
import React from "react";

export const Foo = () => {
    return <Bah/>;
};

Bah.js

export const Bah = (props) => {
    return <h1>Bah!</h1>;
};

Foo.test.js

import React from "react";
import Enzyme, {shallow} from 'enzyme';
import ReactAdapter from 'enzyme-adapter-react-16';
import chai from 'chai'
import chaiEnzyme from 'chai-enzyme'

chai.should();
Enzyme.configure({adapter: new ReactAdapter()});
chai.use(chaiEnzyme());

import {Foo} from "../../src/client/components/Foo"

describe("Foo", () => {
    it("renders a <Bah/>", () => {
        const wrapper = shallow(<Foo/>);
        wrapper.find("Bah").length.should.equal(1);
        wrapper.should.have.text("<Bah />");
    });
});

当Babel编译代码时，这个测试通过了，但是当tsc编译它时，Foo组件有文本"< />“，并且wrapper.find("Bah")找不到任何元素。

转换后的代码如下：

tsc's Bah：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Bah = void 0;
exports.Bah = (props) => {  //a
    return React.createElement("h1", null, "Bah!");
}; //b
//# sourceMappingURL=Bah.js.map

巴别塔：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Bah = void 0;

const Bah = props => { //c
  return /*#__PURE__*/React.createElement("h1", null, "Bah!");
};
exports.Bah = Bah; //d

区别只在于如何导出Bah：如果我将tsc javascript中标记为a-b的行替换为babel输出中标记为c-d的行，则测试将正常工作。

为什么这两段代码有不同的行为？

我有没有设置错误，或者我应该以不同的方式编写我的测试，这样它们就可以独立于我使用的转译器一致地通过？

Answer 1

一个部分的答案:问题是React不会使用tsc转译的代码自动设置类的displayName属性。如果我把Bah的代码改成

export const Bah = (props) => {
    return <h1>Bah!</h1>;
};
Bah.displayName = "Bah";

然后，tsc的测试就会按照预期进行。