I'm very new to React Native, mobile app development and the whole stack of technologies, so assume I could have done even the most basic thing wrong. I'm trying to set up a simple React Native app but can't get a test to successfully execute.
Steps to reproduce:
Run react-native init MyAwesomeApp
The default app successfully runs in emulator using react-native run-android
Create __tests__ folder
Add basic test myfirst.test.js to folder
const counter = (a) => a + 1;
describe('counter: Should increment the passed value', () => {
expect(counter(1)).toBe(2);
});
Execute tests with npm test.
Output:
> trytest#0.0.1 test /home/xxxxx/MyAwesomeApp
> jest
FAIL __tests__/myfirst.test.js
* Test suite failed to run
Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/home/xxxxx/MyAwesomeApp"
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.161s
Ran all test suites.
npm ERR! Test failed. See above for more details.
After lots of Googling, one thing I have tried which appears to have fixed that particular error is to change the contents of .babelrc from "presets": ["module:metro-react-native-babel-preset"] to "presets": ["react-native"]. The error I now see when executing the tests is:
> trytest#0.0.1 test /home/xxxxx/MyAwesomeApp
> jest
FAIL __tests__/myfirst.test.js
* Test suite failed to run
Cannot find module 'AccessibilityInfo' (While processing preset: "/home/xxxxx/MyAwesomeApp/node_modules/react-native/Libraries/react-native/react-native-implementation.js")
at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:22:12)
at node_modules/lodash/_baseClone.js:163:23
at arrayEach (node_modules/lodash/_arrayEach.js:15:9)
at baseClone (node_modules/lodash/_baseClone.js:160:3)
at cloneDeepWith (node_modules/lodash/cloneDeepWith.js:37:10)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:44)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.169s
Ran all test suites.
npm ERR! Test failed. See above for more details.
For me to get this to work for react-native version 0.57.8 I did:
After changing .babelrc to:
{
"presets": ["react-native"]
}
Seem like you need to install babel-preset-react-native. So:
yarn add babel-preset-react-native or npm install babel-preset-react-native.
Unfortunately, we started to have problems with the build when we made this change. So I am guessing there is a better way to solve the problem.
I then looked it to this thread and found this worked for me (without the change to the .babelrc file).
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
}
You should check Jest version in Package.json and update if required
Related
i just started a project and im trying to start the but it already has this error showing:
error: node_modules\react-native\Libraries\Image\ImageAnalyticsTagContext.js: Property body[6] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"
this is a known issue caused by a bug in a newly released version of babel. it will impact all new react-native and expo apps. you can resolve it with yarn resolutions in a new project:
--- a/package.json
+++ b/package.json
## -25,5 +25,8 ##
},
"jest": {
"preset": "react-native"
+ },
+ "resolutions": {
+ "#babel/plugin-transform-react-display-name": "7.14.5"
}
}
After insert resulutions key on the package.json, run yarn install
Credits: https://github.com/brentvatne
Issue Link: https://github.com/facebook/react-native/issues/31961
Run this command:
npm install --save-dev #babel/plugin-transform-react-display-name
The problem is due to a babel update that affected the RN project. copy #babel from some other project and paste in node_modules or Download the #babel folder from here and replace the existing folder in the node_modules.#Babel Download
And run
npm start --reset-cache
Whenever I try to run a locally installed version of testcafe, I get the error Cannot find module '../testcafe/lib/cli'. Steps I've taken:
git clone <testcafe>, then cd to testcafe
npm install
npm link
cd to repo where my automated tests reside
npm link testcafe
Run testcafe <browser>
Results in
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module '/Users/rcooper/testcafe/lib/cli'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Is there something else I need to do, to run a local version of this library?
You need to build the TestCafe package. Run npx gulp build before the npm link command.
I have successfully created a Nuxt.js project with this configuration using the CLI:
Project name: test
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: None
Linting tools: None
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)
Development tools: jsconfig.json
Version control system: Git
The developement server runs properly with npm run dev.
npm run build also runs without errors and tells me that:
Ready to run nuxt generate
But the execution of nuxt generate leads to the error Command 'nuxt' not found. This is strange because nuxt seems to be installed when I execute npm nuxt list.
I first reinstalled just nuxt and then all dependencies after deleting the node_modules/ folder, but the error remains the same. If I just run npm run start it tells me
Nuxt Fatal Error
Error: Output directory `dist/` does not exists, please use
`nuxt generate` before `nuxt start` for static target.
This is strange again because the .nuxt/dist/ folder exists.
Does anyone have an idea what is going wrong?
I have solved the problem. For me it works if I run npm run generate instead of nuxt generate.
Expo react-native app does not load on connected iphone
When I start my app using the command below:
expo start --tunnel
I get the following error:
Logs for your project will appear below. Press Ctrl+C to exit.
Unable to resolve "react-native-vector-icons/AntDesign" from
"node_modules/react-native-elements/src/helpers/getIconType.js"
Building JavaScript bundle [=================================================================================================== ] 99%
I am using ios 10.13.6 High Sierra.
Anybody have seen this issue before? any suggestions to debug or resolve this issue?
it looks like you are not using the babel preset which is set up when you initialize a project in expo. this preset remaps react-native-vector-icons to #expo/vector-icons, so you would not see this error if you were using it.
if you are using sdk32, you can fix that by creating babel.config.js in your project (and removing .babelrc if there is one) and adding this to babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
now close the packager and run expo start -c.
if you are using an older sdk version than sdk32, you can just edit .babelrc (or create it if it doesn't exist) and change it to this:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
I removed react-native-elements from package.json. I then ran the following command:
rm -rf node_modules package-lock.json; npm install
then issued the following command:
expo start -c --tunnel
This seemed to have fixed the issue. I need the native-react-elements package so the next thing is that I am going to add it back and try to test with different versions of react-native-elements package.
I'm getting a weird import error when I try to test my react-native app with jest. I have babel-jest, babel-preset-react-native, jest, jest-react-native and react-test-render all installed but get this error message when I run npm test.
● Test suite failed to run
/Users/maftalion/www/stars20/kiosk/node_modules/native-base/index.js:4
import Drawer from './Components/vendor/react-native-drawer';
^^^^^^
**SyntaxError: Unexpected token import**
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
at Object.<anonymous> (src/routes/Identification.js:3:17)
at Object.<anonymous> (src/routes/router.js:4:21)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 1.011s
Figured it out, basically throw any node modules that use es6 syntax in transformIgnorePatterns.
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-clone-referenced-element)"
],
Try adding transformIgnorePatterns to your package.json:
{
"name": "MyAwesomeApp",
...
"jest": {
"transformIgnorePatterns": ["/node_modules/"]
}
}
For me Jest works out of the box, however:
$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests: 2 passed
I'm using React Native v0.37.0.
I found the answers given earlier didn't solve Unexpected token import errors in the tests itself, if they are written in ES6 (like the boilerplate tests created by the Ignite CLI after ignite new MyProject).
I finally managed to remove ES6-related errors by adding to the test task in package.json:
"test": "NODE_ENV=test jest --no-cache"
I am using RN 0.45.1, Node 7.10.1 (and 8.1.2), Yarn 0.24.6 and Jest 20.0.4
PS: Don't always see this in the console, but in VS Code v1.13.1 setting --no-cache makes the difference.
You configured Babel in your webpack config and this will only apply to webpack. When other tools, like Jest, use Babel, they won't see that configuration because they don't look at the webpack config. You can use a .babelrc file to configure Babel and that will apply to anything that runs Babel (not just webpack).
Using a .babelrc is usually preferred as you want to have a general babel config, and if you need to override a setting, you can still do that in the specific application like in the webpack config.
Create the following .babelrc:
{
"presets": ["es2015", "react"]
}
With that, you can remove the presets option in your webpack config because it will use the .babelrc. Note that the [cacheDirectory option][3] is specific to babel-loader and is not used to configure the underlying Babel.
You also have a typo in your test, toMatchSnapShot() should be toMatchSnapshot().
expect(rendered.toJSON()).toMatchSnapshot();
I needed to add .babelrc with:
{
"presets": ["#babel/env","#babel/react"]
}
I also needed to install this module
npm install add --dev react-test-renderer