React Native UI Library:
Written in TypeScript and Styled Components.
Written tests for the library using testing-library and jest.
All the tests pass.
React Native App:
Written in TypeScript and Styled Components.
This app imports the above UI Library.
Problem:
When I try to create a unit test for any component, I am getting the below error:
yarn run v1.22.17
$ node_modules/.bin/jest .
PASS src/__tests__/utilities.test.ts
FAIL src/components/shared/__tests__/logo.test.tsx
● 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/USER/Projects/PROJECT/node_modules/hc-mobile-app-ui/dist/modules/accordion/accordion.js:47
return (<StyledWrapper testID="accordion">
^
SyntaxError: Unexpected token '<'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/hc-mobile-app-ui/dist/index.js:4:19)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.138 s
Ran all test suites matching /./i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What I Tried:
Installed jest-styled-components after I followed an article, but that didn't help.
Related
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 using Vue JS to build a plugin and am using the p11n module. I've built my components and everything works fine when serving via npm run serve, but when trying to build the project via npm run build which essentially is running: vue-cli-service build I get the following error regardless of what version I use:
ERROR Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:5400:30)
at Module.error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9824:16)
at tryParse (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9717:23)
at Module.setSource (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:10080:33)
at Promise.resolve.catch.then.then.then (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:12366:20)
No idea how to fix this, I've tried installing the Vue JS rollup plugin, no luck :(
If I run yarn test, which runs jest, I get the following error:
C:\react-native-project\node_modules\react-native\Libraries\Utilities\warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
But that only happens if I follow the directions of the react-native-testing-library:
Then automatically to add it to your jest tests by using setupFilesAfterEnv option in the
jest.config.js file:
If I remove the file I will not get that error and I can get simple tests to run. When I remove the file, the test runs but AsyncStorage is not recognized so the tests still don't run. I have AsyncStorage. It's installed and the app works, but I want to add component tests. I also noticed the file, jest.config.js, is conspicuously missing from the testing project itself. Is there any documentation or working example? I would rather not do a diff of my project and the testing project. Is there a more well-documented or reliable testing framework/module available?
I'm able to get working tests by following the documentation of the React Native Testing Library with the npm package name of #testing-library/react-native not to be confused with the React Native Testing Library with the npm package name of react-native-testing-library. Both packages allow testing components and are recommended by React-Native documentation but this one works when following the instructions. It also has instructions "to define a custom render method that includes things like global context providers, data stores, etc" so that testing components with AsyncStorage and such shouldn't be a problem.
I get an error when I start testing the application:
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:
...
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/mmvs/Desktop/ReactNative/node_modules/react-navigation/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '#react-navigation/core';
How to solve this error?
You need to add moduleNameMapper in package.json
look at this link : https://jestjs.io/docs/en/webpack#handling-static-assets