Jest connectStyle native-base-shoutem-theme error
See original GitHub issueI have gone through these following points
- Check latest documentation: https://docs.nativebase.io/
- Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
- Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
- Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
- [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
- [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/
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:
- Created 4 years ago
- Reactions:4
- Comments:6
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Got blocked due to this issue for quite a long time. Waiting for a fix to be provided by native-base sooner.
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) isnative-base
based.