I am new to Jest and Stackoverflow posting.
I have been trying to add unit test cases for knockoutJS application but getting ReferenceError: ko is not defined error when running the test. Any help would be appreciated.
below is the package.json file.
{
"name": "jstesting",
"version": "1.0.0",
"description": "",
"main": "eVIPs.js",
"type": "module",
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/preset-react": "^7.17.12",
"jest": "^28.1.0",
"jest-html-reporters": "^3.0.8",
"typescript": "^2.9.2"
},
"dependencies": {
"#babel/preset-env": "^7.18.2",
"#babel/preset-typescript": "^7.17.12",
"babel-jest": "^28.1.0",
"jquery": "^3.6.0",
"knockout": "^3.5.1"
},
"jest": {
"reporters": [
"default",
[
"jest-html-reporters",
{
"publicPath": "./html-report",
"filename": "report.html",
"openReport": false
}
]
],
"collectCoverage": true
}
}
and this is the test file.
import testLogin from '../loginPage';
import homeJS, { HomeViewModel } from '../Home';
Related
I learn React and JavaScript.
After running npm install I see that react and react-dom is in my node_modules, why is that?
I have a small problem when using the library component that I get duplicate react error.
So I try to learn how to fix this
here is the package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "src/index.js",
"module": "dist/notistack.esm.js",
"types": "src/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.12.3",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
I have recently been put on a project that has a mixture of ES5/6+ code.
It uses Babel for compilation of some of the newer syntax.
I'd like to debug this (breakpoints etc.) using Visual Studio Code, but the problem I am having is that the breakpoints are hitting the transpiled files instead of the source files that I write.
Here is my package.json file:
{
"name": "xxxxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prestart": "npm install",
"start": "node index.js",
"test": "jest --collect-coverage --verbose",
"lint": "eslint **/*.js",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\""
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged --compilers js:babel-core/register --require babel-polyfill"
}
},
"keywords": [
"OAI"
],
"license": "Unlicense",
"private": true,
"dependencies": {
"aws-sdk": "^2.874.0",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"https": "^1.0.0",
"js-yaml": "^3.14.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mongoose": "^5.4.0",
"oas-tools": "2.1.7",
"request-promise": "^4.2.6",
"uuid": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.13.13",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/preset-env": "^7.13.12",
"#babel/register": "^7.13.8",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"chai": "^4.3.4",
"eslint": "^6.8.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"mocha": "^6.2.3",
"nyc": "^14.1.1",
"prettier": "2.2.1",
"pretty-quick": "^3.1.0",
"swagger-parser": "^8.0.3"
}
}
Here is my babel.config.js file:
module.exports = {
presets: [["#babel/preset-env"]],
plugins: ["#babel/plugin-proposal-optional-chaining"],
sourceMaps: true
};
And finally, here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"env": {
"NODE_ENV": "development",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch DEV",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
},
{
"env": {
"NODE_ENV": "qa",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch QA",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
}
]
}
The only posts/questions on this problem that I've found are somewhat dated and aren't too helpful.
Here is what I've already looked at on this topic:
https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
https://github.com/microsoft/vscode/issues/103556
JavaScript Development in ES6 With Debugging
https://medium.com/#drcallaway/debugging-es6-in-visual-studio-code-4444db797954
Any help, or a solution to this problem would be greatly appreciated. Thanks in advance!
You have to generate source maps files. Their purpose is to map the source files to generated files, and they are being used by the debugger.
Do this by adding the devtool: 'source-map' setting to the configuration
I am working on testing rest API's for an node application. I have many test suites, so i want to generate an html report for the tests, I have installed jest-html-reporter. But i don't know how to configure in package.json( I am not using jest.config.json file)
package.json
{
"name": "products_api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.0",
"fs": "0.0.1-security",
"jest": "^24.8.0",
"jest-html-reporter": "^2.5.0",
"joi": "^14.3.1",
"mongodb": "^3.2.5",
"redis": "^2.8.0",
"supertest": "^4.0.2",
"util": "^0.12.0"
}
}
SSR is a cool donejs feature. But in my current project I have no use of it because I am building a page which gets wrapped in a cordova app only.
{
"name": "abc",
"version": "0.0.0",
"description": "abc.org",
"homepage": "www.abc.org",
"repository": {
"type": "git",
"url": "git+https://github.com/xyz/xyz.git"
},
"author": {
"name": "xyz",
"email": "xyz#gmail.com",
"url": "www.abc.org"
},
"private": true,
"scripts": {
"test": "testee test.html --browsers firefox --reporter Spec",
"start": "done-serve --port 8080",
"develop": "done-serve --develop --port 8080",
"build": "node build"
},
"main": "spotwizard/index.stache!done-autorender",
"files": [
"src"
],
"keywords": [
"",
"donejs-app"
],
"steal": {
"main": "spotwizard/index.stache!done-autorender",
"directories": {
"lib": "src"
},
"configDependencies": [
"live-reload",
"node_modules/can-zone/register"
],
"plugins": [
"done-css",
"done-component",
"steal-less",
"steal-stache"
],
"envs": {
"server-production": {
"renderingBaseURL": "/dist"
}
},
"serviceBaseURL": ""
},
"dependencies": {
"ajax-request": "^1.2.3",
"can-ajax": "^1.1.4",
"can-component": "^3.3.10",
"can-connect": "^1.5.9",
"can-define": "^1.5.5",
"can-route": "^3.2.3",
"can-route-pushstate": "^3.1.2",
"can-set": "^1.3.2",
"can-stache": "^3.11.1",
"can-view-autorender": "^3.1.1",
"can-zone": "^0.6.13",
"done-autorender": "^1.4.0",
"done-component": "^1.0.0",
"done-css": "^3.0.1",
"done-serve": "^1.5.0",
"generator-donejs": "^1.0.7",
"http-parser-js": "^0.4.10",
"lodash": "^4.17.5",
"steal": "^1.5.15",
"steal-less": "^1.2.0",
"steal-stache": "^3.1.2"
},
"devDependencies": {
"can-fixture": "^1.1.1",
"donejs-cli": "^1.0.0",
"funcunit": "^3.2.0",
"steal-qunit": "^1.0.1",
"steal-tools": "^1.9.1",
"testee": "^0.3.0"
},
"license": "MIT"
}
The app has been scaffolded with the usual donejs cli commands:
donejs add app abc
By doing so SSR is by default active which is not desired in my particular case.
Is there a configuration switch to disable this behaviour?
I'm using Webpack with Polymer, importing a component like so:
import '#polymer/polymer/polymer-element.html';
class AppShell extends Polymer.Element {
static get is() { return 'app-shell'; }
}
I left out the rest of the component here. The import is working as expected in my app, but when I am running ESLint, I get the following error message:
50:27 error 'Polymer' is not defined no-undef
This is my package.json, where I'm defining my ESLint settings. Anyone have an idea why ESLint is not picking up the import properly?
{
"name": "client-meeting-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node utils/webserver.js",
"lint": "eslint --ext .html,.js */**",
"build": "node utils/build.js"
},
"dependencies": {
"#startup-boilerplate/inkling": "*",
"auth0-lock": "^10.7.3",
"lodash": "^4.6.1",
"moment": "^2.17.1"
},
"devDependencies": {
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"eslint": "^3.16.0",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"file-loader": "^0.8.4",
"fs-extra": "^0.30.0",
"polymer-cli": "^0.17.0",
"wc-loader": "*",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
},
"eslintConfig": {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"plugins": [
"html"
]
}
}
Polymer is defined as a global, so I would configure Polymer as a global in your package.json:
"eslintConfig": {
"globals": {
"Polymer": true
}
}