Invalid chai property when using Chrome, Firefox browsers in Karma - javascript

I have been using PhantomJS as the browser to run my karma tests using grunt-karma. I am now trying to switch to another browser, but I am getting an assortment of "Invalid Chai property" errors when running the tests, which seem to happen on lines using should assertions, such as "foo.should.be.a.function;" I have tried a number of things, but nothing fixes it, and there doesn't seem to be any preexisting issues addressing this. Here is my package and karma.config. Note that I've shortened both lists. I should also add that I have tried updating all testing-related modules to their latest versions, since I know some of them are a couple versions behind, but this had no positive effect, so I reverted.
// karma.config
frameworks: ['mocha', 'chai', 'sinon-chai'],
browsers: ['ChromeHeadless'],
// package.json
"devDependencies": {
"angular-mocks": "1.6.5",
"babel-core": "6.26.0",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-transform-exponentiation-operator": "6.24.1",
"babel-plugin-transform-regenerator": "6.26.0",
"babel-preset-env": "1.6.1",
"chai": "4.1.2",
"chai-as-promised": "7.1.1",
"grunt": "1.0.1",
"grunt-angular-templates": "1.1.0",
"grunt-babel": "6.0.0",
"grunt-cli": "1.2.0",
"grunt-contrib-watch": "1.0.0",
"grunt-karma": "2.0.0",
"grunt-mocha-istanbul": "5.0.2",
"grunt-mocha-test": "0.13.2",
"include-all": "^4.0.3",
"istanbul": "0.4.5",
"karma": "1.7.1",
"karma-babel-preprocessor": "7.0.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-mocha": "1.3.0",
"karma-ng-html2js-preprocessor": "1.0.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-sinon": "1.0.5",
"karma-sinon-chai": "1.3.4",
"karma-spec-reporter": "0.0.31",
"mocha": "3.2.0",
"sinon": "4.5.0",
"sinon-chai": "3.0.0",
"updtr": "2.0.0"
}

With some help, I determined my issue. Using PhantomJS with tests such as
foo.should.be.a.function;
the test would pass without issue, but I believe this to be a fault of PhantomJS, since this is not the proper syntax for this assertion. It should be
foo.should.be.a('function');
After realizing this and making all the changes, all 'Invalid chai properties' tests passed in Chrome. PhantomJS has been allowing these invalid tests to run, so I am glad we are making the change.

Related

What NPM dependencies are required for modular Vue?

I have working knowledge in conventional multi page applications developed in HTML + JS libraries using SSR but I am new to modern web development. I am currently learning Vue JS (the latest version) and I have watched some tutorial videos online. The videos I watched taught writing Vue JS web pages in a plain HTML + <script> setup instead of a project setup created by a Vue CLI program.
Now, I would like to know what NPM dependencies in the package.json file are required to change a project setup from a single HTML + Vue CDN script src to one with a folder structure set up by vue-cli, just like modern project folder structure created by other CLIs, e.g. Angular and React.
After running vue init <template name> I get a package.json like the following:
{
...,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In this NPM project, it is not required to have a <script src> CDN link but I am still able to use all Vue features. I know the JavaScript file is already included in one of the node_modules folders. But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder? I do not find any file path pointing to the JS file(s) in the project.
In Vue's official documentation, it states that:
The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.
May I know what dependencies do the job (or if it is the nature of a Node.js project, it is born this way) and any documentation or quotes from developers that are easy to understand for web dev newbies like me?
But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder?
I think what you're looking for is webpack config - I suggest you when creating blank project via Vue-CLI select options manually to set each config in dedicated file (so e.g. webpack's one will be in webpack folder with different .config.js files (separately for development, common and production).
Webpack resolves for you all file paths and dependencies that are used inside your project and bundles them into one (or multiple part-chunk) JavaScript file.
Regarding your main question - what you see under dependencies section is what will be included in your final application code and is necessary to make it work. Although, what you have under devDependencies section is required to build/compile/transpile/minify etc. your project so in the end it will have all dependency paths resolved properly, styles compiled (e.g. from scss to css) and everything uglyfied + minified.

Unable to run tests on Mocha; Babel 7.0.0 required but 6.2.3 is being loaded instead

I have already installed all the latest LTS versions of Babel but everytime I try Mocha this error is throwed. I suspect there is some dependency that is calling it, but if that's the case I have no idea what can be done.
I'm using Mocha and Chai to (try to) test my units. Thing is, everytime I run test the Requires Babel "^7.0.0-0", but was loaded with "6.26.3". error is throwed. I already updated babel-core and babel-register to their # versions and even uninstalled the old ones but nothing changes.
I have also tried to change my test script from:
"test": "nyc ./node_modules/.bin/mocha tests/**/*.spec.js --require babel-register"
To:
"test": "nyc ./node_modules/.bin/mocha tests/**/*.spec.js --require #babel-register"
But it misses the module.
In my research I have only seen fixes for Jest - not for Mocha. In case the error persists I think I'll be going to change testing frameworks.
I have also found a similar question here in Stack Overflow but no answer was given.
Here is my devDependecies:
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-transform-destructuring": "^7.4.3",
"#babel/register": "^7.4.0",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"chai": "^4.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.16.0",
"husky": "^1.3.1",
"mocha": "^6.1.3",
"nyc": "^13.3.0",
"prettier": "^1.17.0",
"prettier-eslint": "^8.8.2",
"prettier-eslint-cli": "^4.7.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
If possible, I would like to keep using Mocha, so if anyone could help me out of this I would very much appreciate.
EDIT:
Here is my .babelrc file:
{
"plugins": ["#babel/plugin-transform-destructuring"],
"presets": ["#babel/preset-env"]
}

Polyfilled React application suddenly reports that 'fetch' method is not defined

In the past months I have been developing a React web application that is displayed within a ASP.NET Core web project (template of Visual Studio). The application has worked in recent months and is used by users who will display it exclusively in IE 11 (Office web add-in that uses IE 11 rendering engine). I have used the 'fetch' method extensively and did not experience problems after adding the babel-polyfill npm package. Unfortunately, today I received the following error:
'fetch' is undefined
The polyfill packages are still present and I am unclear as to why this error is reported suddenly. As stated above it did work before, and I am unsure what caused the situation in which the 'isomorphic-fetch' package stopped working. Below you will find the package.json contents. Any insight into where to look for the root cause of this problem would be greatly appreciated!
{
"name": "ReactApp",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.38",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"#microsoft/office-js": "^1.1.2",
"#types/prop-types": "^15.5.2",
"babel-polyfill": "^6.26.0",
"moment": "^2.20.1",
"office-ui-fabric-core": "^9.3.0",
"office-ui-fabric-react": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.29.0.tgz"
}
}

cannot find module "react/lib/ReactComponentTreeHook" error when updating to React 16.2.0

Changed react and react-dom to 16.2.0 in my package JSON and receiving the following error.
Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
Have tried clearing my node_modules, reinstalling everything, starting with a fresh project and adding dependencies in small chunks to narrow down the issue, and trying just about every option already seen on stack overflow.
my package.json is as follows:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "..."
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"classnames": "^2.2.5",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.16.2",
"express-session": "^1.15.6",
"moment": "^2.19.3",
"mongoose": "^4.13.6",
"multer": "^1.3.0",
"node-sass": "^4.7.2",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"qs": "^6.5.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-dom": "16.2.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.4.1",
"style-loader": "^0.19.0",
"svg-sprite-webpack-plugin": "^1.1.0",
"svg-spritemap-webpack-plugin": "^1.0.3",
"url-loader": "^0.6.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.10.0"
},
"author": "",
"license": "ISC",
"homepage": ""
}
After placing a breakpoint at the line erroring out, it seems that the stack trace is coming form the import of react-dom, but if that is at the latest version matching react, i don't understand why i am having this issue.
Out of options that I can think of, would appreciate any help. Thanks.
Have tried clearing my node_modules, reinstalling everything
Remember that since NPM 5-th version it generates package lock file, without purging that reinstalling modules will not work appropriately.
Also check following - if some package has own dependency on old react package version, it will be installed into nested node_modules directory, and then everything is dependent on project/loaders structure. In come circumstance, invalid new or old package version will be loaded. In some npm packages, like graphql, special warning added for that case: "Maybe you have installed different version of package".
So, check other packages' versions, and maybe update them.

How to add an Angular 2 App as a view in Express.js

I'm making an app in Angular 2 that needs to get data from a script which would run on the server. In order to do this, I'm trying to add my already existing Angular app as a view to an express application as is done here. I followed the instructions outlined in the tutorial for initial set up of the folder structure, but the tutorial didn't go over how to actual connect the Angular and express apps so that they would both be run together when npm start is used.
I then found another post which suggested to use the express/angular generator which I ended up installing which produced this package.json file:
{
"name": "support-dashboard",
"version": "0.0.0",
"dependencies": {
"express": "~3.0.0",
"ejs": "~0.8.4"
},
"devDependencies": {
"connect-livereload": "~0.2.0",
"grunt": "~0.4.1",
"grunt-concurrent": "~0.3.0",
"grunt-contrib-clean": "~0.4.1",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.3.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.3.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-imagemin": "~0.1.4",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.4.0",
"grunt-google-cdn": "~0.2.0",
"grunt-karma": "~0.4.3",
"grunt-ngmin": "~0.0.2",
"grunt-open": "~0.2.0",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.2.0",
"grunt-usemin": "~0.1.11",
"jasmine-core": "^2.4.1",
"karma": "^1.1.2",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.1",
"matchdep": "~0.1.2",
"phantomjs-prebuilt": "^2.1.11"
},
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "karma start test\\karma.conf.js"
}
}
Despite the package being intended to provide the setup for Angular on top of Express, this file is only set up for express and not Angular. What is the official way to go about setting up a Angular 2 project within Express?
I bet the official way is using angular universal. Allows you to mitigate SEO issues with one page apps. https://universal.angular.io/

Categories