Trying to kick off a test project using react-native/expo and typescript. Started with the expo's basic typescript template.
For testing, followed the expo's documentation on testing with Jest. Added jest-expo
and react-test-renderer
as dev dependencies, and updated the package.json
according to 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 Webstorm editor, encountering 2 errors:
tree Object is possibly 'null'.
.Property 'children' does not exist on type 'ReactTestRendererJSON | ReactTestRendererJSON[]'. Property 'children' does not exist on type 'ReactTestRendererJSON[]'
Also, when running the test, getting 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.
Seeking assistance on what might be missing here. How do I effectively test a react native app with typescript and jest?