React-native-testing-library: How to use with Expo?

[bitttttten]

Hi hi!

I am wondering what is the best practise to use alongside Expo? The Expo docs suggest to use the "jest-expo" preset, and your docs suggest the "react-native" present.

If I just use the "react-native" preset, then babel is not compiling my code and I run into "Cannot use import statement outside a module" errors. Perhaps this is another issue, although I just wanted to clarify just in case I am doing something immediately obviously wrong :)

Thanks!

[thymikee]

Go with what Expo suggests. This is generic React Native library, we're not optimizing for Expo.

[bitttttten]

Thanks @thymikee for clearing it up!

[realmhamdy]

I think this should be mentioned in somewhere obvious in the docs. I just wasted a few hours trying to configure this to work with Expo.

Here's a good starting template:

_Don't even try to get this to work with Expo, dumbass!_

[thymikee]

I think you can contribute something meaningful to let other Expo users know about how things work :)

[bitttttten]

_Don't even try to get this to work with Expo, dumbass!_

What doesn't work for you @realmhamdy ? I am using this library successfully with Expo 🤔

[realmhamdy]

@bitttttten how did you do it? Enlighten our conversation with your wisdom.

[bitttttten]

I am using the jest-expo preset, and I extended the matches using the setupFilesAfterEnv as explained in the docs.

If you're having trouble I would recommend starting a new expo project, adding in jest and this library, and seeing if it doesn't work from there.

[realmhamdy]

So I have a test that looks like this:

import React from "react"
import { render } from "@testing-library/react-native"
import App from "./App"


test("App component shows greeting", () => {
    const { getAllByText } = render(<App />)
    expect(getAllByText("Hello there!")).toHaveLength(1)
})

And a jest entry in package.json that has this:

{
    "preset": "jest-expo",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  }

Giving me this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Do you have any directions?

[thymikee]

@realmhamdy Rename your App component to something else or import ./App.tsx instead of ./App. Jest has an issue with App.tsx and app.json being next to each other and it picks app.json, hence you React thinks you want to render an object (app.json) instead of a function (App.tsx).

I haven't investigated where this comes from yet, because imports should be case sensitive. Will try to prioritize this.