I'm edveloping a Mozilla Firefox extension using Node.js and I'm trying to cover my implementation with unit tests using Jest.
So my package.json looks like so:
{
"name": "keep-your-session",
"version": "0.1.0",
"description": "Mozilla Firefox extension plugin to store and manage browsing sessions",
"main": "manifest.json",
"scripts": {
"test": "jest"
},
"type": "module",
"jest": {
"testEnvironment": "jest-environment-node",
"transform": {}
},
"repository": {
"type": "git",
"url": "git+https://github.com/BartoszKlonowski/keep-your-session.git"
},
"engines": {
"node": ">=13.0.0"
},
"keywords": [
"Firefox",
"Extension",
"Plugin",
"Session"
],
"author": "Bartosz Klonowski",
"license": "GPL-3.0-or-later",
"bugs": {
"url": "https://github.com/BartoszKlonowski/keep-your-session/issues"
},
"homepage": "https://github.com/BartoszKlonowski/keep-your-session#readme",
"devDependencies": {
"#babel/preset-env": "^7.14.7",
"eslint": "^7.28.0",
"jest": "^27.0.5",
"web-ext": "^6.1.0"
}
}
To test some of logic functions I used export syntax to export functions in it and import them in the test implementation file.
Two problems appeared:
1. Jest does not recognize import, export keywords throwing an error:
FAIL __tests__/content.tests.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
...
Details:
P:\Projekty\KeepYourSession\__tests__\content.tests.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { eventTargetIDToCommand } from '../src/popup/MainPopup';
^^^^^^
SyntaxError: Cannot use import statement outside a module
2. Extension stopped working - it works when there's no export in the file, so obviously it fails to launch the extension due to lack of transpiled/packed sources.
I've searched a lot for this problem and tried to add different plugins of Babel, or configure it in various ways, but obviously there's something missing and I just don't know what.
So my question is:
How to correctly configure my environment to transpile all the sources correctly for Mozilla Firefox extension and for Jest testing?
Related
I used the recent cookiecutter django package to generate a new django product. But I am having trouble with the sass/scss compilation aspect.
I looked at this, and its no help, as I need to setup the package.json to run any commands.
I tried to make one, but I cannot seem to get it to run.
{
"name": "my_awesome_project",
"version": "1.0.0",
"description": "My Awesome Project ==================",
"main": "index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"scss": "sass --load-path my_awesome_project/static/sass/ my_awesome_project/static/css/a.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"compass": "^0.1.1"
}
}
In all honesty, I don't really know what Im doing with this part, nor where to start.
I want to use Node native support for import/export with NPM packages. To start I'm running cuccumberjs version 3.1.0. However when I run this command:
/usr/local/bin/node --experimental-modules ./node_modules/.bin/cucumber-js
I get an error:
(node:42011) ExperimentalWarning: The ESM module loader is experimental.
SyntaxError: Unexpected token import
/full/path/to/test/directory/features/support/getWindowLocation.js:2
import {runJsInBrowser} from "./runJsInBrowser.mjs";
^^^^^^
All my automation test run fine until I try to convert one of my scripts to a ES module and import it. Here is an snippet from the file:
runJsInBrowsers.mjs
export default async function runJsInBrowser(
browserDriver,
windowFunc,
waitForReturn = true,
timeOut = 10000
) {
...
};
--
package.json
{
"name": "tests",
"version": "0.0.1",
"description": "Test for testing.",
"main": "index.js",
"license": "UNLICENSED",
"dependencies": {
"chromedriver": "^2.0",
"cucumber": "^3.1",
"selenium-webdriver": "^3.0"
},
"devDependencies": {
}
}
I try to use Jest with bablejs and ES2017 in my project, according to the Jest Getting Started page and also Bablejs config for ES2017 this is my .babelrc file :
{
"presets": ["es2017"],
"env": {
"test": {
"presets": ["es2017"]
}
}
}
And my package.json is:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2017": "^6.24.1",
"jest": "^21.2.1"
}
}
When I type npm test to run all my test with jest i get these error :
){import StateList from './StateList';
^^^^^^
SyntaxError: Unexpected token import
It means it doesn't know import.
babel-preset-es2017 does not transform import statements, because it only includes the plugins: syntax-trailing-function-commas and
transform-async-to-generator.
When installing babel-preset-es2017 you also get a warning that it has been deprecated in favour of babel-preset-env, which contains everything that the es201x presets contained and more.
warning babel-preset-es2017#6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
As shown in the Migration guide from es2015 to env, it is a drop-in replacement.
npm install --save-dev babel-preset-env
And change your .babelrc to:
{
"presets": ["env"]
}
Do not confuse babel-preset-env with Babel's env option, which I have removed from your current config, since you are using the exact same presets for the test environment as for any other, so it doesn't have any effect.
You can configure babel-preset-env to only transform features that are not supported by the platform you target, for example { "targets": { "node": "current" } } will only transform features that aren't supported by the Node version you are running. If no targets are specified, it will transform everything. For details see the Env preset documentation.
Note: With the upcoming version 7 of Babel, the official packages will be published under the namespace #babel, which means that babel-preset-env will be #babel/preset-env.
I'm working on two Node packages at once, let's call them Library and Consumer. Library is responsible for rendering a bunch of stuff in the browser. All Consumer does is import Library from 'library' and call Library(someConfigHere) -- it's basically just a test to make sure Library is doing what I expect in the browser.
I've npm linked Library into Consumer and am trying to run Browserify on Consumer, but I get this error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'. Library does indeed contain an ES6 export statement, so I'm guessing that Browserify is only running against Consumer and not Library.
So my question is: is there any way to force Browserify to transform dependencies as well?
This is my package.json:
{
"name": "consumer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "budo index.js --port $PORT",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify-shim": "^3.8.12"
},
"browserify": {
"transform": [
"babelify"
]
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
This is Consumer's index.js:
import Library from 'library' // <= this is what isn't getting babelified
console.log(Library);
This is Library's index.js:
export default (config) => {
console.log('Testing testing')
}
Browserify transforms can be configured to be global, which means they will be applied to files within node_modules, too.
The configuration is per-transform. With babelify, you'd configure it like this:
browserify().transform("babelify", {
global: true
})
Or, if you are using the command line, like this:
browserify ... -t [ babelify --global ] ...
Or, to configure it in the package.json, it should be something like this (note the added square brackets):
"browserify": {
"transform": [
["babelify", { "global": true }]
]
}
Babelify also implements an ignore option, so it would be possible to configure it to transform only the files within node_modules that you want it to. There is more information here.
Another solution would be to include a similar browserify/babelify configuration in your library module's package.json. When processing dependencies, Browserify will check said dependency's pacakge.json files for transforms and will apply any that are configured.
I have published a jRCarousel jQuery plugin to npm. I initially got the error that name can not contain capital letters, so I have changed that in package.json and then published it got published but on npm website when I try the "Try it out" option I get the "ReferenceError: jQuery is not defined" error. Not sure why is the error as I have specified the dependency in package.json.
Also if there are any changes to only package.json and not to any other files in package or module , how can I update only the package.json file on npm, or do I have to publish it new version no.(which I want to avoid).
Here is my package.json
{
"name": "jrcarousel",
"version": "1.0.0",
"description": "jRCarousel - jQuery Responsive Carousel,
a modern, lightweight responsive carousel plugin",
"main": "dist/jRCarousel.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/vinayakjadhav/jRCarousel.git"
},
"keywords": [
"jquery-plugin",
"ecosystem:jquery",
"jQuery Resposive Carousel",
"jQuery slider",
"Responsive Slider",
"Carousel",
"Slider",
"Gallery",
"lightweight"
],
"author": "Vinayak Rangnathrao Jadhav",
"license": "MIT",
"dependencies": {
"jquery": "^1.9.1"
},
"bugs": {
"url": "https://github.com/vinayakjadhav/jRCarousel/issues"
},
"homepage": "https://github.com/vinayakjadhav/jRCarousel",
"devDependencies": {}
}
npm package
Github Repository
TRY IT OUT Link
Note: I am new to npm, have searched a lot but very less info available related to jquery-plugin publishing. Any help is appreciated.
Wrap your plugin with this code. It's the UMD pattern that allows your plugin to run inside browser and most of module bundlers.
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"));
} else {
factory(root.jQuery);
}
}(this, function ($) {
...your plugin code goes here...
}));