Jest-Expo crashes on example (React.createElement: type is invalid -- expected a string)

Question

I'm very confused on why the example test isn't running. I'm using Expo Web here with typescript. My frontend runs fine using expo start --web.

// App.tsx
const App = () => {
  return (
    <View>
       <Text>Hello world</Text>
    </View>
  );
}

export default App;

I followed the example test from the expo-jest docs

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

import App from '../App'; // <-- only changed path to match my folder structure

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

However when I run npm test, I get

const tree = renderer.create(<App />).toJSON();
                               ^
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I know this is about mixing up default exports with named exports most of the time but I am cleary using a default export and import. What am I doing wrong?

Answer 1

You may have app.json file in the directory which also contains App.tsx. Jest tries to import app.json rather than App.tsx by default.

Configure Jest's moduleFileExtensions and place tsx in the left.

"moduleFileExtensions": ["tsx", ...]