5

I am trying to start test with react-native/expo and typescript. I have created an app with the expo's basic typescript template.

To start testing, I followed the expo's documentation on testing with Jest. I have added jest-expo and react-test-renderer as dev dependencies, and have updated the package.json as per the docs:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    ...
    "test": "jest"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/jest": "^26.0.23",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/react-test-renderer": "^17.0.1",
    "jest-expo": "^41.0.0",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.0.0"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "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/.*)"
    ]
  }
}

This is the test, App.test.tsx:

import renderer from 'react-test-renderer';
import App from "../App";
import React from "react";

describe('<App />', () => {
    it('has 1 child', () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree.children.length).toBe(1);
    });
});

In the editor (Webstorm) it is throwing 2 errors:

  1. tree Object is possibly 'null'.
  2. Property 'children' does not exist on type 'ReactTestRendererJSON | ReactTestRendererJSON[]'. Property 'children' does not exist on type 'ReactTestRendererJSON[]'.

And also, when I run the test, it throws a different error for <App />

renderer.create(<App />).toJSON():

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

Could you please help me what am I missing here. How to test react native with typescript and jest?

2
  • 1
    I got your last error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. too with TypeScript. It was trying to import app.json instead of my component. Perhaps my post could help you in the right direction: stackoverflow.com/questions/65549722/… Commented Jun 8, 2021 at 8:51
  • @Kipnoedels Yup! Found this issue github.com/expo/expo/issues/9541#issuecomment-693319666. Seems that is because of expo's bug. Commented Jun 8, 2021 at 13:49

1 Answer 1

7

Seems like there's a bug/issue with Expo's Jest preset, as I found out that there's an open GitHub issue related with the error.

To fix the issue as per the GitHub answer and like Kipnoedels has pointed out, I had to add this in my jest configuration of package.json:

"moduleFileExtensions": ["ts", "tsx", "js"]

So, the package.json looks somewhat like this:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    ...
    "test": "jest"
  },
  "dependencies": {
    ..
  },
  "devDependencies": {
    ...
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "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/.*)"
    ],
    "moduleFileExtensions": ["ts", "tsx", "js"]
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.