CODEWITHSUNDEEP
reactjsreact-nativejestjs
TIJ
TIJ

Reputation: 3171

Jest fails for external npm packages

I'm using jest for the first time with React, This time I'm using it with React Native project. and it working perfect with below code. 

import React, { Component } from 'react';
import {
  Text,
  View,
} from 'react-native';


export default class Login extends Component {
  render() {
    return (
      <View>
        <Text>Login Page</Text>
      </View>
    )
  }
}

But after added a Button from my component library, jest fail the test.

import React, { Component } from 'react';
import {
  Text,
  View,
} from 'react-native';

import { Button } from 'tc-components';    

export default class Login extends Component {
   render() {
      return (
        <View>
          <Text>Login Page</Text>
          <View>
            <Button onPress={this.loginHandler.bind(this)}>Log in</Button>
          </View>
        </View>
      )
   }
}

error message 

- SyntaxError: Unexpected reserved word
        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:306:10)
        at Object.<anonymous> (app/scenes/Activity.js:2:17)
        at Object.<anonymous> (__tests__/Activity-test.js:3:15)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 1.261s)

Upvotes: 2

Views: 758

Answers (1)

TIJ
TIJ

Reputation: 3171

Need to manually mock tc-component in your test file

jest.mock('tc-component', () => {
  const React = require('react');
  const TC = {}

  const createComponent = (type) => {
    return React.createClass({
      displayName: type,
      propTypes: {
        children: React.PropTypes.node
      },
      render() {
        return <div {...this.props}>{this.props.children}</div>;
      }
    });
  };

  TC.Button = createComponent("Button");

  return TC;
});

import 'react-native';
import React from 'react';

import Activity from '../scenes/Activity';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

describe('Activity', () => {

  it('renders correctly', () => {
    const tree = renderer.create(
      <Activity />
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });

});

Upvotes: 2

Related Questions