Ts-jest: Can not get display name in React when named export

[keiya01]

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior:

1. setup jest config with ts-jest

2. create App component and named export it as bellow.

export const App = () => <div/>;

1. create test file as bellow

test('<App/>', () => {
  console.log(App.name);
});

1. You can check App.name is undefined

Expected behavior

It should output App when I executed console.log(App.name)

envinfo

System:
    OS: Mac

Npm packages:
    jest: ^26.2.2
    ts-jest: ^26.1.4
    typescript: ^3.9.7
    babel(optional):

[ahnpnl]

can you please provide your repo ?

[keiya01]

@ahnpnl Sure.

[keiya01]

@ahnpnl I have created repo. https://github.com/keiya01/ts-jest-issue

[keiya01]

FYI: If I changed to compile with only babel, this issue is resolved. But I want to use ts-jest, if possible

[ahnpnl]

hmm I'm not quite sure what plugins babel has, but if you write

export function App() {
  return <div/>
}

you will get value for App.name. There is a slight difference when compiling to js between function declaration vs function expression

// function declaration
exports.App = void 0;
const react_1 = __importDefault(require("react"));
function App() {
    return react_1.default.createElement("div", null);
}
exports.App = App;

// function expression
exports.App = void 0;
const react_1 = __importDefault(require("react"));
exports.App = () => {
    return react_1.default.createElement("div", null);
};

I think you can only get name if using function declaration. I suspect that Babel has a plugin to compile

exports.App = () => {
    return react_1.default.createElement("div", null);
};

to

function App() {
    return react_1.default.createElement("div", null);
}

which results in you can see value for App.name.

TypeScript compiler doesn't work the same way like Babel does, especially about transpiling ts to js. This is not ts-jest issue but just different way of compiling.

[keiya01]

I see. Thank you for checking this issue.

Probably, I will use babel-plugin-transform-function-name.

[ahnpnl]

you can also write your own TypeScript AST transformer and give it to ts-jest :), following that babel plugin does

[keiya01]

I will give it a try :)

[keiya01]

FYI: This issue has also been discussed in typescript repo. https://github.com/microsoft/TypeScript/issues/6433

[ahnpnl]

Ah ha nice 👍 I was also surprised that each browser has their own way of producing name so when I tested out some codes, chrome gave me different results than jest.