Uncaught Error: Invariant Violation: Element type is invalid: expected a string or a class/function but got: object

We got into this issue when we were writing test cases for a React app. This issue can happen for multiple reasons. For our case, it was an import issue.

Here is the full issue:

When we ran the test cases using jest the test case failed due to the wrong way of importing components. Inside the component we had a import like below:

import { ArticleDate } from '@media/date-block'; // This caused the issue. 

Inside the ArticleDate component, it had export default and we needed to import it using it’s name like below:

import ArticleDate from '@media/date-block'; // This solved the issue.