Firebase Functions TypeScript unit testing devDependencies - unit-testing

Following the guideline here: https://firebase.google.com/docs/functions/unit-testing
I'm trying to write unit tests to my TS functions.
here's my package.json:
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"test": "mocha --reporter spec"
},
"main": "lib/index.js",
"dependencies": {
"#types/algoliasearch": "^3.27.0",
"#types/axios": "^0.14.0",
"#types/nodemailer": "^4.6.0",
"#types/stripe": "^5.0.11",
"algoliasearch": "^3.27.1",
"axios": "^0.18.0",
"firebase-admin": "~5.12.0",
"firebase-functions": "^1.0.3",
"nodemailer": "^4.6.4",
"stripe": "^5.8.0",
"webpack": "^4.7.0"
},
"devDependencies": {
"#types/node": "^9.6.6",
"firebase-functions-test": "^0.1.2",
"mocha": "^5.2.0",
"ts-loader": "^4.2.0",
"tslint": "^5.8.0",
"typescript": "^2.8.3",
"webpack-cli": "^2.1.2",
"webpack-node-externals": "^1.7.2"
},
"private": true
}
and I have 1 problem and 1 question.
problem:
I can't import the firebase-functions-test
in my index.test.ts file.
it is looking for it in dependencies only and not in devDependencies...
(adding it inside dependencies solve it).
question:
Can I move all the #types to devDependencies?
Thanks.

If I am right you probably get error something like
Module 'firebase-functions-test' is not listed as dependency in package.json
In fact this is because you have enabled tslint rule no-implicit-dependencies. You can disable it and then you will not get error when importing devDependencies in your unit test.

You can change set tslint to consider dev,
{
...
"rules": {
"no-implicit-dependencies": [true, "dev"],
...
}
see https://github.com/houndci/hound/issues/1522#issuecomment-415760094

Related

Expo EAS build failing on Prebuild

The build was working fine before installing expo-image-picker. But it's not working now even after removing the package.
This is the build command.
eas build -p android --profile preview2
Both android and ios build failing.
It looks like an image error, i removed all the images from my app but the issue still persists
Here's my package.json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#eva-design/eva": "^2.1.1",
"#expo/webpack-config": "~0.16.2",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/material-bottom-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.2",
"#react-navigation/stack": "^6.2.1",
"#sentry/react-native": "^3.4.2",
"#ui-kitten/components": "^5.1.2",
"axios": "^0.27.2",
"expo": "~45.0.0",
"expo-application": "~4.1.0",
"expo-blur": "~11.1.0",
"expo-constants": "~13.1.1",
"expo-dev-client": "~0.9.6",
"expo-device": "~4.2.0",
"expo-image-picker": "~13.1.1",
"expo-linear-gradient": "~11.3.0",
"expo-localization": "~13.0.0",
"expo-notifications": "~0.15.2",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.1",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-modern-datepicker": "^1.0.0-beta.91",
"react-native-reanimated": "^2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg": "12.3.0",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.7",
"sentry-expo": "^4.2.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/lodash": "^4.14.182",
"#types/react": "~17.0.21",
"#types/react-native": "~0.67.6",
"#types/react-native-vector-icons": "^6.4.10",
"#types/styled-components": "^5.1.25",
"#types/styled-components-react-native": "^5.1.3",
"ts-node": "^10.7.0",
"typescript": "~4.3.5"
},
"private": true
}
I ended up removing all the images I optimized with expo-optimize, deleted node_modules and rebuild yarn or npm install and that did the trick for me. Fortunately I had a back up of the images.

Build script doesn't copy all files with babel

I want to create, for the first time, a npm package from a react component. I'm following this tutorial here
But when I try the build script, I have some error. Because I'm working on windows/vscode powershell terminal, I changed rm-rf to del/s/q/f and installed cross-env.
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Now it partially worked but many files are missing in dist folder.
Here is the error msg
ReferenceError: [BABEL] src\lib\components\DatePicker.jsx: Unknown option: C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "C:\\Users\\romai\\Workspace\\Openclassrooms\\Frontend\\HRNet\\hrnet_react_datepicker\\node_modules\\babel-preset-react-app\\index.js")
at Logger.error (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\index.js:212:65)
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.
Here is the src structure
Here is my current builded dist folder
.babelrc
{
"presets": [
["react-app", { "absoluteRuntime": false }]
]
}
Actual package.json
{
"name": "xxx",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"private": false,
"description": "datepicker component for personnal openclassrooms hrnet project",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx"
},
"scripts": {
"start": "react-scripts start",
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"cross-env": "^7.0.3",
"sass": "^1.49.9"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
}
}
Thanks in advance
I got the same error and decided to debug. This debugging lead me to create.js in node_modules/babel-preset-react-app, which contains "overrides". This is the key that is being rejected. Commenting that part out gives the following error:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "blabla/frontend/shared/node_modules/babel-preset-react-app/index.js")
This lead me to brave-search "babel-cli 7", which gives https://babeljs.io/docs/en/babel-cli.
A note here states Note: Please install #babel/cli and #babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x. Other than npx, you can also drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel
Notice it states #babel/cli. Looking at package-lock.json, I see babel-cli. Removing that one and installing #babel/cli gave me version 7.
TLDR: uninstall babel-cli, install #babel/cli.

parcel build building in root folder instead of ./dist

I am very confused as to why my parcel build script is spewing everything into the root folder instead of into ./dist, I have tried specifying with and without output paths with no luck.
What confuses me more is how my start script "parcel index.html" outputs into the dist folder.
To clarify on the below, I am running: npm run build
Here's my package.json
Thank you for any help!
{
"name": "eclaires","version": "1.0.0",
"description": "",
"main": "index.html",
"browserslist": "last 10 versions",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"start": "parcel index.html",
"devserver": "live-server",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss css/style.comp.css --use autoprefixer -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass prefix:css compress:css",
"build:html": "parcel build index.html --dist-dir ./dist",
"build": "npm-run-all build:css build:html"
},
"author": "LY",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^10.2.4",
"core-js": "^3.8.3",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"parcel": "^2.0.0-beta.1",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1"
}
}
In general, use the --dist-dir <dir> option during build:
parcel build index.js --dist-dir ./dist
or specify the build directory for your project at package.json#main.
{
"main": "dist/index.js"
"scripts": {
"build": "parcel build"
}
}
Your main is set to the root index.html, which is why it is output there.
Also, the reason why running your npm start outputs to dist but your npm build outputs to root is because your start script is set to:
"start": "parcel index.html",
which is equivalent to Parcel's default serve command:
parcel serve index.html
Parcel's serve command may behave differently than build.
It looks like you're not setting up the output directory.
According to the documentation, you can do like I did below, this will create the dist folder and the files:
https://parceljs.org/cli.html
{
"name": "silicia",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"parcel": "^1.12.3"
},
"devDependencies": {
"sass": "^1.32.8"
},
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html --out-dir ./dist"
},
"author": "Jesus Ramirez",
"license": "ISC"
}

RN Android Build Issue - Execution failed for task ':app:packageDebug'

My client app is already published on Google Play and it crashes
It maybe a stupid behavior from me , when I noted it works well for IOS,
I quickly deployed it for Android and published it
I tried to run it in my development environment using
sudo react-native run-android
it makes the below error
What's the potential errors ?
I'm using MAC High Sierra
my package.json file
{
"name": "WOFA",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"accordion-collapse-react-native": "^0.1.10",
"is-email": "^1.0.0",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-easy-grid": "^0.2.1",
"react-native-firebase": "~5.5.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-grid-list": "^1.0.9",
"react-native-image-picker": "^1.0.1",
"react-native-image-slider-show": "^1.0.3",
"react-native-modal": "^11.1.0",
"react-native-paypal-lib": "^1.0.9",
"react-native-side-drawer": "^1.1.7",
"react-native-slider": "^0.11.0",
"react-native-snackbar": "^1.0.1",
"react-native-svg": "^9.5.1",
"react-native-touchable-safe": "^1.1.2",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.1",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
the packages which need native linking are : [react-native-firebase , react-native-gesture-handler , react-native-image-picker , react-native-paypal-lib , react-native-svg]
I got similar error on Windows 10.
In my case the culprit was node v.12.
Uninstall node and install LTS version of node.
(Currently node v.10.16.0)
Best Luck. 👍

Test:unit failing because of firebase and bootstrap. How do I import these?

I tried editing vue.config.js but failed to resolve issue:
Here is my package.json:
{
"name": "tp-health-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.19",
"chart.js": "^2.8.0",
"firebase": "^5.11",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-class-component": "^7.1.0",
"vue-property-decorator": "^8.1.1",
"vue-router": "^3.0.6",
"vue-slider-component": "^3.0.31",
"vuefire": "^2.0.0-alpha.24",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.1.1",
"vuex-map-fields": "^1.3.4"
},
"devDependencies": {
"#types/chai": "^4.1.0",
"#types/mocha": "^5.2.4",
"#vue/cli-plugin-pwa": "^3.7.0",
"#vue/cli-plugin-typescript": "^3.7.0",
"#vue/cli-plugin-unit-mocha": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"typescript": "^3.4.5",
"vue-template-compiler": "^2.6.10"
}
}
Terminal output:
Warning: This is a browser-targeted Firebase bundle but it appears it is being
run in a Node environment. If running in a Node environment, make sure you
are using the bundle specified by the "main" field in package.json.
If you are using Webpack, you can specify "main" as the first item in
"resolve.mainFields":
https://webpack.js.org/configuration/resolve/#resolvemainfields
If using Rollup, use the rollup-plugin-node-resolve plugin and set "module"
to false and "main" to true:
https://github.com/rollup/rollup-plugin-node-resolve
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'stringify' of undefined
at Module../node_modules/#firebase/webchannel-wrapper/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/#firebase/webchannel-wrapper/dist/index.esm.js:21:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../node_modules/#firebase/firestore/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/#firebase/firestore/dist/index.esm.js:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../node_modules/firebase/firestore/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/firebase/firestore/dist/index.esm.js:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../src/main.ts (/Users/TP/tp-health-test/dist/webpack:/src/main.ts:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)