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

Expo Development Tools
1

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
2

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
3

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?!

4

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
5

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

6

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.

08%20PM
08%20PM2372×1494 328 KB

7

So adding:

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

to my jest configuration did the trick based on this - moduleFileExtensions: confusing documentation · Issue #7563 · facebook/jest · GitHub. 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!

4 Likes
8

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

1 Like
9

Haha yeah it’s PayPal.Me

Much appreciated my friend :smile:

1 Like
10

Just sent it over, thanks mate

2 Likes
11

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.