question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can not get display name in React when named export

See original GitHub issue

🐛 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):

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10

github_iconTop GitHub Comments

3reactions
ahnpnlcommented, Sep 1, 2020

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.

1reaction
ahnpnlcommented, Aug 31, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

DisplayName of export function in React - Stack Overflow
I read React docs where it was told that by default ReactClass.displayName is defined and = name of class (function). I have two...
Read more >
Context - React
Using context, we can avoid passing props through intermediate elements: ... Context object accepts a displayName string property. React DevTools uses this ...
Read more >
What is export default in JavaScript ? - GeeksforGeeks
One is Named Exports and other is Default Exports. ... During the import, it is mandatory to use the same name of the...
Read more >
Understanding the Difference Between Named and Default ...
Named and Default exports are not React-centric ideas. They are es6 features. However, this article will deal with the impacts they have in...
Read more >
Function.prototype.displayName - JavaScript - MDN Web Docs
The displayName property is not initially present on any function — it's added by ... React devtools also use the displayName property when...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found