Jest .tsx Expo 34 with TypeScript, renderer.create Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I am trying to create Expo Project with TypeScript and Jest.

But already if I create new project with expo-cli (3.0.10), via expo init [project] -> minimal with TypeScript, Jest is running in a problem and can’t render my component.

I really just use the fresh bare project, didn’t change anything there. :pensive:

Error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      at invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2056:11)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2077:15)
      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4629:23)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4686:35)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6508:28)
      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6920:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7745:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11413:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11445:24)

What I use:
Complete fresh Mac with newest node (v12.9.0) and npm. (6.10.3)
Expo-Cli 3.0.10

Googled my fingers bloody, you are my last hope. :sob: Thank you.

1 Like

Having the exact same issue.

The issue is with how jest is parsing typescript files. If you change App.tsx to App.jsx the tests will pass without any trouble.

I am fairly certain that ts-jest is the solution, I am just working out the correct implementation at the moment.

I’ll let you know how I get on, and vice-versa.

1 Like

Yeah, good to know, I am not alone.

But I am still get the Error, with changed name to App.jsx.

Tried “jest --cleanCache”, is there another thing to achieve a pass?!

I have ts-jest working correctly now, I just have to get react-native-testing-library working and i’ll send through the steps.

1 Like

This is driving me crazy. Did you manage to make any progress ?

Having the same problem. This is only happening when I try to test my App.tsx file. I noticed if I console.log(App) inside of my App.test.tsx that it prints out the contents off app.json…no idea why.

So adding:

      "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx",
      "node"
    ]

to my jest configuration did the trick based on this - https://github.com/facebook/jest/issues/7563. I guess jest found app.json before App.tsx and then ran the test against that instead. Reordering the moduleFileExtensions to put .ts and .tsx before .json is why it works now. Hope this helps!

2 Likes

Do you have PayPal? I’ll send you $50 for working this out and posting the answer

Haha yeah it’s https://www.paypal.me/benscudder

Much appreciated my friend :smile:

Just sent it over, thanks mate

1 Like