React-native jest test failing: TypeError: Cannot read property 'default' of undefined

Question

I have the following code which I want to write a snapshot test.

import React from 'react';
import { AsyncStorage, View, Button, Text, StyleSheet } from 'react-native';
import t from 'tcomb-form-native';

const Login = t.struct({
    email: t.String,
    password: t.String,
});
const Form = t.form.Form;
class SignInScreen extends React.Component {


    render() {
        return (
            <View style={styles.container}>
                <Form ref={c => this._form = c} type={Login}/>
                <Button title="Submit" onPress={this.handleSubmit}/>
                <Button title="Sign Up" onPress={this.handleSignUp}/>
            </View>
        );
    }
}

export default SignInScreen;

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        marginTop: 15,
        padding: 20,
        backgroundColor: '#ffffff',
    }
});

I run jest in the command line, it works well test passes until I define onPress() methods.

validateCredentials = (email, password) => {
    return true;
};

handleSubmit = async () => {
    const value = this._form.getValue();
    if(value != null) {
        /*
            TODO: Make a query to backend to validate credentials
         */
        if (this.validateCredentials(value['email'], value['password'])) {
            await AsyncStorage.setItem('userToken', 'abc');
            this.props.navigation.navigate('App');
        } else {
            alert('Invalid email or password');
        }
    }
}

handleSignUp =  () => {
    this.props.navigation.navigate('SignUp');
}

Then it failing with error message that I don't really understand.

 FAIL  __tests__/SignInScreen-test.js
  ✕ SignInScreen snapshot test (24ms)

  ● SignInScreen snapshot test

TypeError: Cannot read property 'default' of undefined

   9 | });
  10 | const Form = t.form.Form;
> 11 | class SignInScreen extends React.Component {
     |                                                                                                         ^
  12 | 
  13 | 
  14 |     render() {

  at new SignInScreen (screens/SignInScreen.js:11:423)
  at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:22)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6581:9)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7408:20)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10149:16)
  at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10181:28)
  at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10267:11)
  at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11135:11)
  at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11047:11)
  at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11021:7)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8075
    The above error occurred in the <SignInScreen> component:
        in SignInScreen (at SignInScreen-test.js:7)

jest config:

  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": []
  }

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

My test code:

import 'react-native';
import React from 'react';
import SignInScreen from '../screens/SignInScreen';
import renderer from 'react-test-renderer';

test('SignInScreen snapshot test', () => {
    const snap = renderer.create(<SignInScreen/>).toJSON();
    expect(snap).toMatchSnapshot();
    });

Any ideas?

Answer 1

Usually this error is related jest being unable to find a mock of a particular module. You need to mock tcomb as it is rendering your <Form/> component called in your SignInClass you can do so like this:

jest.mock('tcomb-form-native', () => {
  const React = require('React')
  const t = require.requireActual('tcomb-form-native')
  // Patch the base Component class to make rendering possible.
  t.form.Component.prototype.render = function render () {
    return React.createElement(this.getTemplate().name, this.props)
  }
  return t
})