Cannot find module 'regenerator-runtime/runtime' - javascript

Browserify is throwing this error once I try to use Promises.
Cannot find module 'regenerator-runtime/runtime' in
I've tried node versions 10.15.3 and 12.0.0.
Why is it looking for it in the source folder and not node_modules?
Here's my babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = [
["#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": "2.6.5"
}
]];
const plugins = [];
return {
presets,
plugins
};
}
package.json
{
"name": "ehrsWAR",
"version": "1.10.15",
"private": true,
"scripts": {},
"browserslist": [
"> 5%",
"last 2 versions",
"Firefox > 20",
"ie >= 9"
],
"devDependencies": {
"#babel/cli": "^7.4.3",
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.4.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.0",
"gulp-rename": "^1.4.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^3.0.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.11.1"
},
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"core-js": "^2.6.5"
}
}

Try to include "#babel/transform-runtime" in your plugins under babel config. And include #babel/plugin-transform-runtime in your package.json. I was getting the same error and this resolved the issue for me.

Related

How can I solve “ TypeError: Cannot set property '_eventListeners' of undefined” with jest

I have a vue.js application, and I installed Jest using these instruction:
https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest.html.
when I run npm test, I get the error.
● Test suite failed to run
TypeError: Cannot set property '_eventListeners' of undefined
at Window.close (node_modules/jsdom/lib/jsdom/browser/Window.js:475:51)
I have done everything in the docs, and every other thing about the app is fine, except testing. Please, how can I solve this issue?
This is my package.json config file:
{
"name": "vendor",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"vue": "^2.5.22",
"vue-router": "^3.0.2",
"vuetify": "^1.3.0"
},
"devDependencies": {
"vue-server-renderer": "^2.6.6",
"babel-core": "^6.26.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-service": "^3.4.0",
"#vue/server-test-utils": "^1.0.0-beta.29",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"gulp-babel": "^8.0.0",
"jest": "^24.1.0",
"jest-serializer-vue": "^2.0.2",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.4.6",
"vue-jest": "^3.0.3",
"vue-template-compiler": "^2.6.5",
"vuetify-loader": "^1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{js,vue}",
"!**/node_modules/**"
],
"coverageReporters": [
"html",
"text-summary"
],
"snapshotSerializers": [
"jest-serializer-vue"
]
}
}

Babel plugin not being recognized when trying to run Jest

I'm just starting to write some Jest tests but have immediately run into an "unknown plugin" error in what otherwise appeared to be a fully working Webpack/Babel setup that functions fine at the npm run dev/npm run build stage.
Specifically, I'm getting ReferenceError: Unknown plugin "#babel/transform-async-to-generator" specified in "C:\\Users\\scott\\path\\to\\ThisProject\\.babelrc" at 0, attempted to resolve relative to "C:\\Users\\scott\\path\\to\\ThisProject"
(Error reads that way as I'm in Git Bash on Windows.)
I definitely have #babel/plugin-transform-async-to-generator installed.
The relevant part of my package.json looks like:
"scripts": {
"test": "jest",
"build": "webpack --mode=production",
"dev": "webpack --mode=development"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
},
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-transform-arrow-functions": "^7.0.0",
"#babel/plugin-transform-async-to-generator": "^7.1.0",
"#babel/plugin-transform-modules-commonjs": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"ajv": "^6.5.4",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"jest": "^23.6.0",
"jsdom": "^13.0.0",
}
My .babelrc is very simple:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"ie": "11"
},
"useBuiltIns": "entry"
}
]
],
"plugins": [
"#babel/transform-async-to-generator",
"#babel/transform-arrow-functions",
"#babel/transform-modules-commonjs"
],
"env": {
"development": {},
"test": {},
"production": {}
}
}
Likewise jest.config.js which is straight out of jest --init:
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testEnvironment: "jsdom"
};
Any ideas on what might be going wrong?
Try running npm install --save-dev babel-jest babel-core#^7.0.0-bridge #babel/core, I believe the babel team released a bridge package to aid dependencies that are affected by the v7 upgrade.
See here for more info: https://github.com/facebook/jest/tree/master/packages/babel-jest#usage

SyntaxError: Unexpected token import - Jest

Hi I am trying setup web components skeleton project with hyperhtml and jest and getting following error while running test cases
import {Component, bind, define, hyper, wire} from 'hyperhtml/esm';
^^^^^^
SyntaxError: Unexpected token import
Tried all existing suggestion in stackoverflow for the issue, but no-luck.
Below are my configurations
.babelrc.json
{
"env": {
"production": {
"presets": [
[
"env", {
"targets": {
"browsers": ["last 2 Chrome versions", "last 2 Firefox versions", "last 2 Edge versions", "last 2 Safari versions", "ie 11"]
},
"modules": false,
"useBuiltIns": true
}
]
],
"plugins": [
"transform-object-rest-spread",
[
"babel-plugin-transform-builtin-classes", {
"globals": ["HTMLElement"]
}
]
]
},
"test": {
"presets": [
["env", {
"targets" : { "node" : "current" },
"modules": "commonjs",
"debug": false,
"useBuiltIns": "usage"
}],
"stage-0",
"jest"
],
"plugins": [
"transform-object-rest-spread",
"transform-es2015-modules-commonjs",
[ "babel-plugin-transform-builtin-classes", { "globals": ["HTMLElement"] } ]
]
}
}
}
jest.config.js
module.exports = {
verbose: true,
collectCoverageFrom: [
'./src/**/*.{js,jsx}',
'!**/_tests/**',
'!**/node_modules/**'
],
testMatch: ['**/_tests/**/*.js'],
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/dist/',
'<rootDir>/demo/',
'<rootDir>/docs/'
],
testURL: 'http://localhost/',
moduleNameMapper: {
'\\.(css)$': '<rootDir>/test-mocks/styles.js'
},
moduleDirectories: ["node_modules", "./src"],
transform: {
'^.+\\.(js?)$': 'babel-jest'
}
};
package.json
"scripts": {
...
"test": "NODE_ENV=test jest --no-cache --config jest.config.js",
....
}
"dependencies": {
"hyperhtml": "2.10.1",
"hyperhtml-element": "3.1.0",
"babel-loader": "7.1.4",
"babel-jest": "22.4.3"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-eslint": "8.2.3",
"babel-preset-react": "^6.24.1",
"babel-plugin-transform-builtin-classes": "0.6.1",
"babel-plugin-transform-dynamic-import": "2.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-jest": "^23.2.0",
"babel-preset-stage-0": "6.24.1",
"basichtml": "0.16.0",
"cssnano": "4.1.4",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"jest": "22.4.3",
"jest-environment-node": "22.4.3",
"jsdoc": "3.5.5",
"live-server": "1.2.0",
"minami": "1.2.3",
"postcss": "7.0.5",
"postcss-cssnext": "3.1.0",
"postcss-custom-media": "7.0.6",
"postcss-discard-comments": "4.0.1",
"postcss-easy-import": "3.0.0",
"postcss-loader": "3.0.0",
"postcss-mixins": "6.2.0",
"postcss-nesting": "7.0.0",
"postcss-reporter": "6.0.0",
"postcss-selector-not": "4.0.0",
"prettier-eslint": "8.8.1",
"sizzle": "2.3.3",
"stylelint": "9.6.0",
"stylelint-config-standard": "18.2.0",
"text-loader": "0.0.1",
"webpack": "4.8.3",
"webpack-cli": "3.1.1",
"webpack-dev-server": "3.1.4",
"webpack-merge": "4.1.2"
}
You can find the code in the following repo.
https://github.com/balajiram/webcomponent-elements-app
If I read "modules": "commonjs" correctly under test preset configuration, it means you should at least try the following instead:
const {Component, bind, define, hyper, wire} = require('hyperhtml/cjs');
You are also using Babel 6 instead of 7, where 7 is better specially for classes and native/built-in extends such as Custom Elements.
If you don't need Shadow DOM (problematic, slow, heavy), I suggest you to use the most deployed polyfill for custom elements, which is document-register-element, the production choice in these years for AFrame, Google AMP, and others.
Last, but not least, this question seems more like a configuration one, so that both web-component and hyperhtml labels here look a bit abused/redundant, since these have literally nothing to do with how you configure your testing environment.
I hope, regardless, to have clarified what is the issue, and what you could improve in general in your project.

Am is supposed to include this syntax for browserify to work?

I am having problems importing jquery.mustache.js and mustache in my browserify set up. Could it be I have to use this syntax in the libraries themselves, in order to use them in my app.js?
jquery.mustache.js:
exports.jQuery.Mustache = jQuery.Mustache;
and in mustache.js:
exports.mustache = mustache;
This is my main/app.js file:
var $ = jQuery = require('jquery');
var mixitup = require('./../bower_components/mixitup/build/jquery.mixitup.min.js');
var Mustache = require('./../bower_components/jquery-Mustache/jquery.mustache.js');
var mustache = require('mustache');
UPDATE:
Would up trying browserify-shim like Amadan mentioned,
But now I am getting the following error...
[13:30:33] { [Error: Cannot find module 'jquery.mustache.js' from '/Users/avonproductsinc/Desktop/browserify_app/app/_js']
I am including my .json file, although I ran it through a validator ;)
{
"name": "browserify_app",
"version": "0.0.1",
"description": "browserify app",
"main": "./app/_js/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"browser": {
"mixitup": "./app/bower_components/mixitup/build/jquery.mixitup.min.js",
"Mustache": "./app/bower_components/jquery-Mustache/jquery.mustache.js"
},
"browserify-shim": {
"jquery": "$",
"mixitup": {
"exports": "mixitup",
"depends": [
"jquery:jQuery"
]
},
"Mustache": {
"exports": "Mustache",
"depends": [
"jquery:jQuery",
"mustache:mustache"
]
}
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.7.13",
"browserify": "^11.1.0",
"browserify-shim": "^3.8.10",
"gulp-autoprefixer": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.2",
"gulp-notify": "^2.2.0",
"gulp-order": "^1.1.1",
"gulp-ruby-sass": "^1.0.0-alpha",
"gulp-sourcemaps": "^1.5.2",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^1.2.0",
"gulp-util": "^3.0.6",
"imagemin-pngquant": "^4.2.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.4.0"
},
"dependencies": {
"jquery": "^2.1.4",
"mustache": "^2.1.3"
}
}
}
And this is my path just for good measure!

I cannot run multiple test files with Jest?

I have just started with Jest today. I have a simple test file in my __tests__ directory. Here is the current test file:
describe('ChangeCalendarView', function() {
it('true', function() {
expect(3).toBe(3);
})
});
This runs with no issue. When I add another file, with the same exact code, other than the description:
describe('ChangeTimePeriod', function() {
it('true', function() {
expect(3).toBe(3);
})
});
Then I get this error:
/usr/local/lib/node_modules/jest-cli/node_modules/node-worker-pool/Worker.js:93
throw new Error('Received unexpected data from child process: ' + data);
^
Error: Received unexpected data from child process: {
"error": "Error: ENOENT, open '/usr/local/lib/node_modules/jest-cli/.haste_cache/cache-react-calendar-component'\n\n"
}
at Worker._onStdout (/usr/local/lib/node_modules/jest-cli/node_modules/node-worker-pool/Worker.js:93:11)
Does this make sense to anyone?
I've fixed this issue by using babel-jest. Here my package.json
{
"name": "myapp",
"version": "0.0.0",
"dependencies": {
"classnames": "^2.1.3",
"dev": "^0.1.3",
"flux": "^2.0.3",
"grunt": "^0.4.5",
"gulp": "^3.9.0",
"immutable": "^3.7.4",
"install": "^0.1.8",
"lodash": "^3.10.0",
"node-simple-static-server": "^1.1.0",
"react-bootstrap": "^0.23.7",
"react-router": "^0.13.3",
"react-router-bootstrap": "^0.18.0",
"react-tools": "^0.13.0-beta.2",
"stackup": "^1.0.1"
},
"devDependencies": {
"babel-jest": "^5.3.0",
"babelify": "^6.1.2",
"browser-sync": "latest",
"browserify-shim": "^3.8.0",
"del": "~0.1.3",
"gulp-autoprefixer": "~1.0.1",
"gulp-bower": "0.0.6",
"gulp-cache": "~0.2.4",
"gulp-imagemin": "latest",
"gulp-jshint": "~1.8.5",
"gulp-load-plugins": "~0.7.0",
"gulp-ruby-sass": "~0.7.1",
"gulp-size": "~1.1.0",
"gulp-strip-debug": "^1.0.2",
"gulp-stylus": "~2.0.1",
"gulp-uglify": "^1.0.2",
"gulp-useref": "~0.4.4",
"gulp-util": "~3.0.1",
"gulp-webserver": "latest",
"jest-cli": "*",
"main-bower-files": "~2.6.2",
"react": "latest",
"react-tools": "latest",
"reactify": "latest",
"strip-debug": "^1.0.1",
"vinyl-source-stream": "^1.0.0",
"watchify": "~2.1"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "../node_modules/babel-jest",
"testFileExtensions": [
"es6",
"js"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"rootDir": "./app",
"collectCoverage": true,
"unmockedModulePathPatterns": [
"react",
"events",
"lodash"
]
},
"browserify": {
"transform": [
"browserify-shim",
[
"reactify",
{
"es6": true
}
]
]
},
"browser": {
"jquery": "./app/bower_components/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
}
}
The glob patterns Jest uses to detect test files. By default it looks for .js and .jsx files inside of tests folders, as well as any files with a suffix of .test or .spec (e.g. Component.test.js or Component.spec.js). It will also find files called test.js or spec.js.
So name your test file with suffix .test .Like pagination.test.js .

Resources