question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Jest connectStyle native-base-shoutem-theme error

See original GitHub issue

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 expo nor 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 ButtonNavi component that is imported in TestPage. Here, native-base is 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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

2reactions
teja-kandulacommented, Nov 18, 2020

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

1reaction
GustavoChiochettacommented, Oct 26, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest - react-native SyntaxError: Unexpected token import
Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e. g. it's...
Read more >
native-base-shoutem-theme - npm package - Snyk
An important project maintenance signal to consider for native-base-shoutem-theme is that it hasn't seen any new versions released to npm in the past...
Read more >
Testing React Native Components with Mocha
In our case we want to compile native-base-shoutem-theme, the module with the error from above. We could simply write the ignore array as...
Read more >
GeekyAnts/NativeBase - CodeSandbox
Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.
Read more >
GeekyAnts - Bountysource
This error is being caused by the tag around a flatlist which worked perfectly fine before ... Jest Error - import connectStyle, {...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found