I'm having a problem making a unitary test with jest over an es6 class. I don't know if the configurations were made properly or if I need some extra package.
This is my file queue.js
export default class Queue {
constructor() {
...
}
//Adds a new elemnt to the queue
method1(element) {
...
}
.
.
.
}
This is my test file
import Queue from "../src/queue";
const myQueue = new Queue();
describe("Queue", () => {
...
...
...
});
This is my .babelrc file
{
"presets": ["es2015"]
}
This is my package.json file. The clean, build and production scripts run all ok, but when I try to run the test, then an error is thrown.
{
"name": "queue",
"version": "1.0.0",
"description": "An implementation of a queue data structure",
"main": "queue.js",
"scripts": {
"test": "jest",
"clean": "rm -dr dist",
"build": "npm run clean && mkdir dist && babel src -s -d dist",
"production": "npm run build && node bin/production"
},
"author": "Osiris Román",
"license": "ISC",
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^25.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"jest": "^25.3.0"
}
}
This is the error:
Plugin/Preset files are not allowed to export objects, only functions. In /home/usuario/practicing/javascript/queue/node_modules/babel-preset-es2015/lib/index.js
Does someone know how can I solve this problem?
The error you are getting means that one of your presets isn't compatible with the babel version.
Looking at your package.json you are using babel version 6. But both jest and babel-jest use later versions of babel. This causes your es2015 preset not to work correctly.
If you are tied to your current version of babel you can downgrade your jest and babel-jest dependencies to a version that uses older versions of babel:
npm uninstall --save-dev babel-jest jest
npm install --save-dev babel-jest#23.6.0 jest#23.6.0
If not, I would recommend to upgrade your babel version (babel-cli, babel-register and babel-preset-es2015 packages) to newer versions.
If you follow this second path, note that babel-preset-es2015 is deprecated and the use of #babel/preset-env is recommended instead.
I finally found how to solve the problem. I'll share here the configuration If someone else is having the same problem.
This is my file queue.js
export default class Queue {
constructor() {
...
}
//Adds a new elemnt to the queue
method1(element) {
...
}
.
.
.
}
This is my test file
import Queue from "../src/queue";
const myQueue = new Queue();
describe("Queue", () => {
...
...
...
});
I decided to use babel.config.js file insted of .babelrc file. This is the content of this new file.
module.exports = {
presets: [["#babel/preset-env", { targets: { node: "current" } }]],
};
This is my package.json file. The clean, build, dev, production and test scripts run all ok without errors.
{
"name": "queue",
"version": "1.0.0",
"description": "An implementation of a queue data structure",
"main": "queue.js",
"scripts": {
"test": "jest",
"clean": "rm -dr dist",
"build": "npm run clean && babel src -s -d dist ",
"production": "npm run build && node bin/production",
"dev": "npm run build && node bin/dev"
},
"author": "Osiris Román",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/register": "^7.9.0",
"babel-jest": "^25.5.0",
"jest": "^25.3.0"
}
}
Thanks to #mgarcia comment I decided to avoid babel-preset-es2015 to use the recommended #babel/preset-env .
Related
In my Playwright test, I am trying to run a cucumber feature using npm run cucumber --profile dev, however no scenarios are being picked up:
Here is my index.ts file:
const common = `./src/features/**/*.feature \
--require-module ts-node/register \
--require ./src/step-definitions/**/**/*.ts \
-f json:./reports/report.json \
--format progress-bar `;
const dev = `${common} --tags '#dev'`;
const smoke = `${common} --tags '#smoke'`;
const regression = `${common} --tags '#regression'`;
export { dev, smoke, regression }
And here is my folder structure as that may be useful:
Also, my home-page.feature file:
Feature: As a user I expect to be able to navigate to the home page
#dev
#regression
Scenario: As a user I expect to be able to see contacts
Given I am on the 'home' page
Then the 'contacts header' should contain the text 'Contacts'
And my package.json:
{
"name": "personalised-offers-platform-e2e-pw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"transpile": "rimraf dist && babel --extensions .ts --out-dir dist src",
"cucumber": "npm run transpile && cucumber-js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"#babel/preset-typescript": "^7.18.6",
"#cucumber/cucumber": "^8.5.0",
"#playwright/test": "^1.23.4",
"playwright": "^1.23.4",
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
}
}
I have tried running just npm run cucumber to see if the tags were the issue, but it gives the same output as above.
Originally, I thought the problem was with the common paths in my index.ts, as the feature wasn't being picked up, but they look OK to me now.
Can someone please explain what I'm doing wrong, & how I can fix it?
I can provide further code to help shed some light on the issue.
Try with "cucumber" option -p or --profile:
npm run transpile && cucumber-js -p
I completed a mini connect-4 game based on the Tic-tac-toe tutorial on Reactjs official website
Code:https://codepen.io/bunansia/pen/KKXXKje?editors=1010
I copied the html,css plus JS file and tried to run on VCS but failed
I have installed node.js, #babel/cli #babel/core #babel/preset-env #babel/preset-react have been installed, and this is how my package.json file looks like
{
"name": "react-connect4",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.16.0",
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.16.5"
},
"description": "",
"plugins": [
[
"#babel/plugin-transform-react-jsx",
{
"throwIfNamespace": false, // defaults to true
"runtime": "automatic", // defaults to classic
"importSource": "custom-jsx-library" // defaults to react
}
]
]
}
I have also created .babelrc file instructing where to find the preset
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
Have tried multiple ways like converting original JS file to babel version
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
And I put them in the folder named "public", while js && css files are in the folder named "script"
But when I run it on live-server everything is blank
What can be the configuration issues?
I have added 2 lines in html file since I am using these two external scripts also
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react#17.0.2/umd/react.development.js"></script>
I'm facing an issue when I try to import something using require() function in jest test file.
script2.test.js
const fetch = require('node-fetch');
it('test function', () => {
expect(4).toEqual(4);
});
Package.json
{
"name": "jest-test",
"version": "1.0.0",
"description": "",
"type": "module",
"scripts": {
"test": "jest --watchAll"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.15.7",
"#babel/core": "^7.15.8",
"#babel/plugin-transform-async-to-generator": "^7.14.5",
"#babel/preset-env": "^7.15.8",
"jest": "^27.3.1"
},
"dependencies": {
"node-fetch": "^3.0.0"
},
"jest": {
"transform": {
"^.+\\.(js|jsx)$": "babel-jest"
}
}
}
babel.config.cjs
module.exports = {presets: ['#babel/preset-env']}
I'm getting following errors when I run the test using npm test
FAIL ./script2.test.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.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
Details:
C:\work\jest-udemy\node_modules\node-fetch\src\index.js:9
import http from 'http';
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | const fetch = require('node-fetch');
| ^
I'm new to JEST, any help is much appreciated.
My Node version is 14.17.3
Thanks you.
It seems that one still needs to jump through the hoops to make jest work with ESM.
In package.json change your script to:
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watchAll"
And in script2.test.js use import:
import fetch from 'node-fetch';
P.S. This was tested with node 14.15.1
I tried to deploy my project developed using React and Node.js to Heroku, but after issuing git push heroku master, I got an error:
2020-06-05T02:12:18.092681+00:00 app[web.1]: import express from "express";
2020-06-05T02:12:18.092682+00:00 app[web.1]: ^^^^^^^
2020-06-05T02:12:18.092682+00:00 app[web.1]:
2020-06-05T02:12:18.092683+00:00 app[web.1]: SyntaxError: Unexpected identifier
2020-06-05T02:12:18.092683+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:718:23)
I googled and it is said that Node.js doesn't support ES6 syntax, and I can solve it by using babel.
But I don't know how to configure it.
Below are my files:
.babelrc.json:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
package.json:
{
"name": "react_e-commerce",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js",
"build": "rimraf dist && babel backend -d dist",
"heroku-postbuild": "npm run build && cd e-commerce && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.16"
},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.1",
"#babel/node": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"babel-cli": "^6.26.0",
"mkdirp": "^1.0.4",
"nodemon": "^2.0.4",
"rimraf": "^3.0.2"
},
"engines": {
"node": "12.4.0",
"npm": "6.9.0"
}
}
And my whole project is on https://github.com/powerseed/e-commerce-React
The e-commerce folder is for frontend.
Thanks in advance!
You can just use require if you want. Here are the details on why there are two ways to bring in files. The difference between "require(x)" and "import x"
per the Nodejs docs I was able to use the following to run node node-module.js and similar may work in your situation--I'm unfamiliar with the specific node version you're working with currently, but the "type":"module" option would likely allow it--I'm using Nodejs v15 at the moment.
package.json
{
"type": "module"
}
node-module.js
import * as os from 'os';
import defaultstuff, { stuff } from './node-import-stuff.js';
console.log(123 === stuff, defaultstuff, Object.keys(os));
node-import-stuff.js
export const stuff = 123;
export default stuff;
I am working on a tool and I have installed some modules locally through NPM, and I get errors when I try to require these modules through NodeJS. I am working in Windows 10, I have already tried setting up NODE_PATH etc.
Below is the structure of my files:
->project
---->node_modules
---->src
-------->css
-------->js
----------->index.js
---->package.json
---->index.html
I populate the index.html by using index.js etc.
Below is the code of my package.json:
{
"name": "bip39",
"version": "1.0.0",
"description": "A tool for converting BIP39 mnemonic phrases to addresses and private keys.",
"directories": {
"test": "tests"
},
"dependencies": {
"bip39": "^2.6.0",
"bigi": "^1.4.2",
"create-hmac": "^1.1.7",
"nem-sdk": "^1.6.7"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/PavlosTze/bip39.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/PavlosTze/bip39/issues"
},
"homepage": "https://github.com/PavlosTze/bip39#readme"
}
Below is my require() code:
var createHmac = require("create-hmac");
var BigInteger = require("bigi");
const bip39 = require("bip39");
const nem = require("nem-sdk").default;
I have done the following steps on NPM:
1) npm init
2) npm install bip39
3) npm install nem-sdk
4) npm install bigi
5) npm install create-hmac
All these files are inside the node_modules, but still, whenever I run the code in the browser I get an 'Error: Cannot find module "bip39"', etc. for all modules.
EDIT: On another directory that I have cloned the same tool, before I merged it with another one, I get no error and everything works correctly, including the require(). etc. Do you need any of those files as well?
Can someone help me please?
try this :
rm -rf node_modules
npm install