TypeError: Super expression must either be null or a function - javascript

I'm very new to unit Testing in vue js. I just went through this website to learn unit testing "https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-mocha-webpack". while I'm practicing the examples in "mocha-webpack" I got this Error
WEBPACK Failed to compile with 1 error(s)
Error in ./src/Counter.vue
TypeError: Super expression must either be null or a function
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32893:5
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32913:4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mdbvue#4.2.0 test: `mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mdbvue#4.2.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-06T10_28_47_073Z-debug.log
Can anyone tell me how to solve this error. This is my Counter.vue file
<template>
<div>
<div>
{{ count }}
<button #click="increment">Increment</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++;
}
}
};
</script>
Here is my Counter.spec.js File
import { shallowMount } from '#vue/test-utils'
import Counter from '../src/docs/Counter.vue'
describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
})


I've looked at the issue linked above.
I have --require test/setup.js in the test script. Here's how it looks like:
require('jsdom-global')();
window.Date = Date;
It solved the problem. Try it out!


It is a problem related with version 1.14.1 of prettier, that is a NPM package used in your scenario.
Indeed, looking at their GitHub repo the issue is reported. At the moment there is a possible workaround: basically, it is to comment out line 32893 of prettier/index.js.
In your environment you can find the file here: /opt/htdocs/guru/unitTest_prct/node_modules/.

Related

NPM RUN BUILD ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css

My Error Capture
ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fortawesome/fontawesome-svg-core/styles.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 30
at /home/simrs/adamklinik/frontend/node_modules/#fortawesome/fontawesome-svg-core/styles.css:200:3
I use nuxt.js and tailwind

For anyone who stumbles over this issue: I solved it by following this answer: https://stackoverflow.com/a/67827344/6098257
In my case I just had to set postcss-custom-properties to false.
build: {
postcss: {
plugins: {
"postcss-custom-properties": false
},
},
}

Try to do npm install first, then rerun with npm run build.

Try to do steps:
npm uninstall #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
npm i #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
Or you can manual update two packages (#fortawesome/free-brands-svg-icons and #fortawesome/free-solid-svg-icons) to v6.x

Vetur can't find package.json

I was writing code for my app with Vue and everything worked perfectly. Then I started to create child components and I could not refresh the localhost anymore.
Now it says:
"Vetur can't find 'package.json"
&
"Vetur can't find 'tsconfig.json' or 'jsconfig.json"
and when I try to "npm run serve" in the cmd - then i get this:
C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo>npm run serve
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cmana\AppData\Roaming\npm-cache\_logs\2021-04-07T12_03_13_953Z-debug.log
Acording to this https://vuejs.github.io/vetur/guide/setup.html#project-setup - I tried to add the jsconfig.json file with this content. (I deleted all the child components so I only have these vue files (About, Todo, App) left.)
{
"include": [
"./src/views/About.vue",
"./src/views/Todo.vue",
"./src/App.vue"
]
}
Still nothing. Anybody any ideas? Thank you <3

First of all, in Visual Studio code, type:
Ctrl + Shift + p
This command, will open this window
Type: settings json in search bar, like this:
Open the first option: "Open Settings (JSON)".
Now, on JSON file, add this: "vetur.ignoreProjectWarning": true, in the end of file, like this:
Restart Visual Studio Code and you're done!

Installing the EsLint extension should solve your problem
if you are on VS Code, search for the EsLint extension by publisher:"Dirk Baeumer", install it and approve the installation to start the EsLint server
Alternatively run this in the terminal
npm install eslint in your workspace
The package.json file gets modified and your server will be up again
for further information on the EsLint extension you can check
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Good luck!

Add "vetur.config.js" outside your project.
In this example below, "vetur.config.js" is added outside the project "vueProject":
Shrinking "vueProject" looks clearer:
Then, paste this code below to "vetur.config.js":
// vetur.config.js
/** #type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `{}`
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: [
'./packages/repo2', // shorthand for only root.
{
// **required**
// Where is your project?
// It is relative to `vetur.config.js`.
root: './packages/repo1',
// **optional** default: `'package.json'`
// Where is `package.json` in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// **optional**
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// **optional** default: `'./.vscode/vetur/snippets'`
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// **optional** default: `[]`
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
globalComponents: [
'./src/components/**/*.vue'
]
}
]
}

in VSCode
ctrl + p
open setting.json
add this line:
"vetur.ignoreProjectWarning": true,
this will ignore the error.

In VS Code, if the actual code is in a subfolder (e.g you have a monorepo), you can add a vetur.config.js in the root directory as per below.
module.exports = {
projects: [
{
root: './frontend', // root of your vue project (should contain package.json)
package: './package.json', // Relative to root property, don't change this.
tsconfig: './tsconfig.json', // Relative to root property, don't change this.
}
]
}
Please refer to Vetur Reference for more details.

Issue with rewire.js - Error: Cannot find module <path to rewired module>

So my directory structure looks like this:
and this is basically the cookie cutter use case for the rewire library right?
So my test module is very bare bones, just trying to rewire the module I want to test.
fetchTerms.test.js
import test from 'ava';
import rewire from 'rewire';
let fetchTerms = rewire('../src/fetchTerms.js');
let dateIsValid = fetchTerms.__get__("dateIsValid");
test("dateIsValid catches invalid dates", t => {
t.false(dateIsValid("999999"));
t.is("", "a");
});
fetchTerms.js
...
function dateIsValid(date) {
let month = parseInt(date.slice(4));
return 1 <= month && month <= 12;
}
...
export default <some other function>;
Unfortunately when I run with ava, I get this "cannot find module" error caused by the attempted rewire
> ava
✖ No tests found in target/test/fetchTerms.test.js
─
Uncaught exception in target/test/fetchTerms.test.js
Error: Cannot find module '../src/fetchTerms.js'
› internalRewire (node_modules/rewire/lib/rewire.js:23:25)
› rewire (node_modules/rewire/lib/index.js:11:12)
› file://target/test/fetchTerms.test.js:3:18
› ModuleJob.run (internal/modules/esm/module_job.js:138:23)
› Loader.import (internal/modules/esm/loader.js:178:24)
─
1 uncaught exception
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fetch_courses#1.0.0 test: `ava`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fetch_courses#1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /mnt/c/Users/********/.npm/_logs/2020-07-22T03_11_15_418Z-debug.log
Unless you can find anything wrong with the rewire path ../src/fetchTerms.js I don't know what could possibly make rewire not know how to find fetchTerms.js.
Any ideas?

npm start returning an error

I am having difficulty with an error when I run 'npm start' on my mean.js application. I will paste both the terminal output and the code from the file with the error.
Terminal:
/Users/developer/dev-projects/Central-Repo/node_modules/rcloader/index.js:39
if (err) throw err;
^
Error: ENOENT: no such file or directory, open '.csslintrc'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! meanjs#0.6.0 start: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the meanjs#0.6.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/developer/.npm/_logs/2018-07-24T09_18_22_923Z-debug.log
Index.js: (error in 10th line of code)
var defaultFileGiven = (config.defaultFile !== undefined);
if (defaultFileGiven) {
if (finder.canLoadSync) {
assign(config, finder.get(config.defaultFile));
} else {
// push callbacks here that need to wait for config to load
configPending = [];
// force the async loader
finder.get(config.defaultFile, function (err, defaults) {
if (err) throw err;
assign(config, defaults);
// clear the configPending queue
var cbs = configPending;
configPending = null;
cbs.forEach(function (cb) { cb(); });
});
}
}

It seems .csslintrc file is not available in your project folder. You can re download this from the master branch and try again.

How to pass arguments to piped npm scripts?

I have the following script in my package.json.
{
"scripts": {
"fetcher": "node server/processes/transport.js | bunyan"
}
}
I try to pass command line arguments to transport.js script like this:
npm run fetcher -- --days=10
But no arguments get passed, npm dumbly passes arguments to the end of the command.

A dirty hack will be like
{
"scripts": {
"fetcher": "bunyan $(node server/processes/transport.js"
}
}
then run the command
npm run fetcher -- --days=10)
Notice, with the hack, npm run fetcher will not work, it should be npm run fetcher -- )

Categories