React-native-testing-library: App.tsx is of wrong type only when testing

[entiendoNull]

I have a small React Native (Expo) app written in TypeScript and have just began to write some tests for it. I started to write tests for some very simple components, and it seems to work out just fine.

However, when I try to write tests for my App.tsx I get the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I have:

• made sure it's a correctly written functional component
• tripple checked the import - which is correct
• tried to import it in another file and checked type there - which results in function.
• stripped out everything from my App.tsx and made it just a valid component in it's simplest form.

However, when I import it into my App.test.tsx to test it it's imported as an object.

What am I missing here? :)

[thymikee]

Can't tell without a repro. Please create one and share here :)

[entiendoNull]

Wow, that was a quick reply :)

When playing around more with it the issue seems to be that it will use the app.json file instead of App.tsx file in my test - regardless of an accurate import following it in VSCode. Renaming app.json to whatever else it will actually go into the App.tsx.

Still need a repro?

[thymikee]

Ah! I actually hit this issue with Jest recently (require should be case-sensitive), but didn't file it. There's nothing we can do from this library side anyway. Glad you worked it out.

As a workaround I'd rather change the App.tsx to something else, or require App.tsx instead of App. Expo relies on app.json, so it's dangerous to change its name.

[entiendoNull]

@thymikee, aww, alright! Thanks for your quick replies.

I added a repo that reproduces the error here anyways:
https://github.com/entiendoNull/react-native-testing-library-repro

It also seem to dislike testing in App.tsx even when solving the name conflict (in the repo, just rename app.json meanwhile testing).

[kieran-osgood]

I know this is closed but I believe (I did clone your repro and this plus adding preset: "react-native" for a separate issue, successfully ran the tests) the fix rather than just renaming would be to add to your jest config:

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

Apparently theres an issue with the defaults set that the json appears before ts/tsx and that causes the issue. Hope it helps someone :)

[AngelTrinidad]

@KieranO547 wow, you save my day 👍