Nativebase: Jest connectStyle native-base-shoutem-theme error

Created on 4 Mar 2020  ·  5Comments  ·  Source: GeekyAnts/NativeBase

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: v10.9.0
npm: 6.2.0
react-native: 0.61.5
react: 16.12.0
native-base: 2.13.8

I use neither exponor xcode.

Expected behaviour

Passing test processing

Actual behaviour

Gives the error.

Steps to reproduce

The test file:

import React from 'react';
import {render, fireEvent} from 'react-native-testing-library';

import TestPage from '../TestPage ';

// NativeAnimatedHelper is not mocked by default on react native's jest setup file.
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
jest.mock('react-navigation', () => ({
  withNavigation: Component => props => (
    <Component navigation={{navigate: jest.fn()}} {...props} />
  ),
}));

describe('TestPage ', () => {
  test('rendering the component', () => {
    const {getByTestId} = render(
      <TestPage navigation={navigation}></TestPage >,
    );
    expect(getByTestId('testpage ').toBeDefined());
  });
});

And the component to test:

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {withNavigation} from 'react-navigation';

import ButtonNavi from '../../components/atoms/ButtonNavi/ButtonNavi';

type Props = {}

const TestPage : React.FC<Props> = ({}) => {
  return (
    <View testID="testpage">
      <View>
        <ButtonNavi title="My title" navigateTo="Home" />
      </View>
    </View>
  );
};
export default withNavigation(TestPage);

And finally the ButtonNavicomponent that is imported in TestPage. Here, native-baseis used:

import React from 'react';
import {StyleSheet} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Text} from 'native-base';

type Props = {
  title: string;
  navigateTo: string;
  navigation: any;
};

const ButtonNavi : React.FC<Props> = ({title, navigateTo, navigation}) => {
  return (
    <Button
      rounded
      onPress={() => navigation.navigate(navigateTo)}>
      <Text>{title}</Text>
    </Button>
  );
};
export default withNavigation(ButtonNavigate);

Now, when I run the above test, following error occurs:

● Test suite failed to run

    C:\Users\Test\AndroidStudioProjects\Testtest\node_modules\native-base-shoutem-theme\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle, { clearThemeCache } from "./src/connectStyle";
                                                                                                    ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/Scr

Is the bug present in both iOS and Android or in any one of them?

It occurs in an Android app.

Any other additional info which would help us debug the issue quicker.

Spent already two days with the issue. I found several issues that looked the same (for example this one), but I tried every single suggested solution and nothing worked for me.

Please note I am using TypeScript.

tests

All 5 comments

Is there any workaround while this issue gets tackled ?

I'm getting the same error, is there an alternative for this yet?

Quite blocked by this issue as well, so probably we're gonna move away from native-base 👎🏽

The problem is our app is almost done, moving away from native-base is going to cost us a lot of time. All of our components (and it is a lot) is native-base based.

Got blocked due to this issue for quite a long time. Waiting for a fix to be provided by native-base sooner.

Was this page helpful?
0 / 5 - 0 ratings