Getting an unexpected token from the component class. Looking for advice on how I can proceed.
The failure:
● Test suite failed to run
C:/../react-native/jest/mockComponent.js: Unexpected token (20:23)
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
18 |
19 | const Component = class extends SuperClass {
> 20 | static displayName = 'Component';
| ^
21 |
22 | render() {
23 | const name =
This worked for me https://github.com/expo/expo/issues/2595#issuecomment-440966998
I think the problem was having jest and jest-expo installed
For me, this worked:
"transformIgnorePatterns": [
"/node_modules/(?!sentry|react-native).+\\.js$",
],
Notice that you must list there all your node_modules
/Users/guillermo/alibrate/alibrate-mobile/node_modules/react-native/jest/mockComponent.js:20
static displayName = 'Component';
Related
Hello I changed my code from fetch to axios and when I run my tests I get this problem... Can anyone help me with that ?
SyntaxError: Cannot use import statement outside a module
> 1 | import axios from "axios";
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
This issue occurred after axios update from 0.27.2 to 1.0.0. There is an opened issue, so probably this is going to be fixed soon. Meanwhile they're working on that, you can temporary fix it by setting up transformIgnorePatterns in jest config:
transformIgnorePatterns = ["node_modules/(?!axios)/"]
For me helped the following jest.config.js setup:
transformIgnorePattern: [
'<rootDir>/node_modules/(?!axios)/'
]
alongside with
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
I have a Nuxt app that runs with pnpm and I'd like to test it using Jest and the vee-validate library.
Whenever I launch my tests, I get this error:
FAIL test/integration/components/ui/RegistrationForm.test.ts
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/my-project/node_modules/.pnpm/vee-validate#3.4.14_vue#2.6.14/node_modules/vee-validate/dist/rules.js:889
export { alpha, alpha_dash, alpha_num, alpha_spaces, between, confirmed, digits, dimensions, double, email, excluded, ext, image, integer, is, is_not, length, max, max_value, mimes, min, min_value, numeric, oneOf, regex, required, required_if, size };
^^^^^^
SyntaxError: Unexpected token 'export'
34 | } from '#nuxtjs/composition-api';
35 | import { extend, ValidationProvider } from 'vee-validate';
> 36 | import {
| ^
37 | min_value as minValue,
38 | max_value as maxValue,
39 | } from 'vee-validate/dist/rules';
at Runtime.createScriptFromCode (node_modules/.pnpm/jest-runtime#28.1.1/node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (components/form/fields/CalendarField.vue:36:1)
at Object.<anonymous> (components/form/fields/FormField.vue:14:1)
I tried to add the option transformIgnorePattern inside jest.config.js but it's not working at all.
This is what I tried:
transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)']
transformIgnorePatterns: ['/node_modules/(?!(.*vee-validate/dist/rules))/']
The only option that works for me is to import the UMD build but I lose all the benefit of tree-shaking.
Sources
https://github.com/logaretm/vee-validate/issues/2310
https://github.com/facebook/jest/issues/2081#issuecomment-699558143
https://qiita.com/tamonmon/items/6392c1680ef498a8c816
I ran into the same problem and was able to fix it by adjusting my jest.config.js file. I did three things there:
add "vee-validate/dist/rules": "babel-jest", to transform: {}
add the file path to transformIgnorePatterns like this: transformIgnorePatterns: ["/node_modules/", "/components/views/*", "node_modules/vee-validate/dist/rules"],
add isolatedModules to true in ts-jest like: globals: {
"ts-jest": {
isolatedModules: true,
babelConfig: true,
},
},
Since this response is late to for the op, I hope this helps atleast someone :)
Trying to execute that must be a simple screen test, I found this error. I saw some related issues and solutions touching babel and jest config but I did not found the proper way to solve it.
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/.../node_modules/react-native-ble-plx/index.js:3
export { BleError, BleErrorCode, BleAndroidErrorCode, BleIOSErrorCode, BleATTErrorCode } from './src/BleError'
^^^^^^
SyntaxError: Unexpected token 'export'
Any suggestion? Thanks!
Finally was solved adding it to jest.config.js:
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!(jest-)?#?react-native|#react-native-community|#react-navigation)',
],
Source: related issue on github
https://github.com/callstack/react-native-testing-library/issues/703
What I have
I'm trying to use jest and Storybook with Storyshots addon for snapshot test in my react-native/typescript app, but I'm having some issues when I try to run simple test.
According to Snapshot testing section in storybook documentation, the only thing you need to do is create an storybook.test.js file with the following:
storybook.test.js
import initStoryshots from '#storybook/addon-storyshots';
initStoryshots();
After this, everything is supposed to work as expected, but the console throws the following error:
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to
import a file which Jest cannot parse, e.g.
it's not plain JavaScript.
By default, if Jest sees a Babel config,
it will use that to transform your files, ign
oring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Mo
dules, see https://jestjs.io/docs/en/ecmascri
pt-modules for how to enable it.
• To have some of your "node_modules" fi
les transformed, you can specify a custom "tr
ansformIgnorePatterns" in your config.
• If you need a custom transformation sp
ecify a "transform" option in your config.
• If you simply want to mock your non-JS
modules (e.g. binary assets) you can stub th
em out with the "moduleNameMapper" config opt
ion.
You'll find more details and examples of
these config options in the docs:
https://jestjs.io/docs/en/configuration.h
tml
Details:
C:\Users\myuser\Desktop\myapp\node_m
odules\react-native-swipe-gestures\index.js:3
import React, { Component } from "react";
^^^^^^
SyntaxError: Cannot use import statement
outside a module
at Runtime.createScriptFromCode (node_m
odules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/#st
orybook/react-native/dist/preview/components/
OnDeviceUI/navigation/index.js:29:53)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 11.468 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
jest.config.js
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
If I remove #storybook/addon-storyshots relate things from my tests, everything is working normally without any problem. So I don't know if I need some extra configuration to make work storybook/jest snapshoot testing with react native.
It's enough. Add react-native-swipe-gestures to transformIgnorePatterns of your jest.config.js.
transformIgnorePatterns: ['node_modules/(?!(react-native|#react-navigation|#react-native|react-native-swipe-gestures)/)'],
This did a trick for me.
I'm trying to publish my first react native pure js module which uses flow. I'm having a hard time.
My repo is here - https://github.com/Noitidart/react-native-buttonex
Source is in ./src/index.js. I use flow there. So I have done in my repo npm i flow-bin#0.57.3 --save-dev.
I then simply did a npm publish. Is there anything else I need to do?
It is not able to be used in Expo.
Doing:
import Button from 'react-native-buttonex' // ERROR. The Expo team has been notified.
Adds that "Error: expo team has been notified". And trying to run it shows red box with "Failed to download module".
I thought to stip the flowtypes so I added .babelrc with:
{
"presets": ["flow"]
}
But when I run babel I get error:
SyntaxError: src/index.js: Unexpected token (29:10)
27 |
28 | class Button extends Component<Props, State> {
> 29 | state = {
| ^
30 | activeAnim: new Animated.Value(0)
31 | }
It seems like its not liking the ES2017 stuff which is normal for react-native.
May you please guide m on how to properly publish this?