MapView causing error in Jest test

Expo SDK
1

I’ve been developing an app for a couple of weeks now. I started trying to add basic Jest tests, but am receiving an error that I have deduced is caused by MapView. When I remove the whole MapView from the component, the basic Jest snapshot test passes. The error I’m seeing is:

React caught an error thrown by View. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior.

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

Anyone encountered this before, or have any potential solutions?

Thanks!

2

hey @devanb can you make sure you’ve imported MapView like it mentions here: https://docs.expo.io/versions/latest/sdk/map-view.html

If you are still having problems, please post your App in https://snack.expo.io/ . It’ll be easier to see what went wrong this way.

1 Like
3

Yep, using a named import!

Here is a snack of the screen. It is working in fact in my app, just not in Jest tests. Kinda odd.

https://snack.expo.io/Byl6Q5Qjib

4

Hmm. If its working in snack, and not in your jest tests, check if you’ve exported your app class and that jest is able to reference your component properly

5

My test is pretty basic. I think I’m doing it correctly, but I may not be:

import 'react-native';
import React from 'react';
import App from '../App';

import renderer from 'react-test-renderer';

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  expect(rendered).toBeTruthy();
});
6

hey @devanb, your snack shows that you are exporting Map, but in your jest tests, you are importing App.

7

Also, theres also a nifty jest-expo tool to make things easier: https://github.com/expo/jest-expo

8

@quinlanj

Yeah, even if I replace <App/> with <Map/> I get the same errors.

I’ve researched around and found something about mocking out the components, but had no luck with it.

When I mock it out, I get that propTypes is undefined from this line: https://github.com/DevanB/Whats-Open/blob/master/mocks/react-native-maps.js#L23

My app source code is here: http://github.com/devanb/whats-open, btw. And I believe CRNA is using jest-expo by default, because I see it in my presets.

9

hey so you’d also want to try import Map from '../App'; since you are exporting Map not App

10

You’ll need mocks for native components. Are you still hitting this when using jest-expo?

11

@thetc Is there anything specific I need to do to “use” jest-expo? This project is a CRNA project, and I see the jest-expo is a preset in my package.json already by default.

12

Not much. You need to have

“scripts”: {
“test”: “node_modules/.bin/jest”
},
“jest”: {
“preset”: “jest-expo”
}

in your package.json and call it through yarn / npm test

13

Hmm, yep, got that in my package.json