Vue Jest Framework | Uncovered lines are show as invalid - vue.js

I am using jest framework for vue.js unit test cases. My issue is my file lines of code is 31. But showing uncovered line is 39, 40. Is there any issue in config related things.
What is the issue here. I am facing this issue in all my .vue files. How to rectify this

"mapCoverage": true
Add this link in your jest.config.json file, then try it will work.

Related

Vue2 and unit tests : SyntaxError: Cannot use import statement outside a module

I am doing unit tests with vue-utils on the front-end of an application written in vue2.
When I run my test, I get this error: SyntaxError: Cannot use import statement outside a module
(I don't even need the problematic module in my test.)
I have looked at several answers on the subject (including adding "type": "module" in package.json or add extension ".mjs") but I always get an additional error after testing the solution.
I work with node/14.19.2.
Do you have any idea?
I don't know which file to show you, don't hesitate to ask me for my code
I had a same issue and in my case the Visual Studio added (modules/js file). Check the top of your vue/javascript code, is there any imported file or not!
I solve my issue by adding this line:
transformIgnorePatterns: ['node_modules/(?!module_name)']
in my jest.config.js file

Vue 3 CLI jest testing - MatchInlineSnapshot does not work?

I am having an issue with my Vue project where ToMatchInline Snapshot does not work and fails test
Any ideas?
Here's my config file
I also tried with render from #testing-library/vue and still getting the same... :(
As I was writing the question I figured it out. I needed a snapshot serializer:
ran npm i -D jest-serializer-vue
and added the following line to my jest.config.js
snapshotSerializers: ["jest-serializer-vue"]
so it now looks as so

Vue Cli remote preset crashes on Invoking Generators

i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file

PhpStorm Less watcher not working with clean-css plugin and autoprefix

I have a following problem with Less. I have configured Less file watcher to work with PhpStorm and so far everything is working. Now I have added a few plugins clean-css and autoprefix and suddenly everything stops working.
The error I get:
SyntaxError: Cannot find module '/usr/local/lib/node_modules/less-plugin-autoprefix/lib/clean-css-processor' in /usr/local/lib/node_modules/less-plugin-clean-css/lib/index.js on line 1, column 29:
My parameters are:
$FileName$ ../../css/$FileNameWithoutExtension$.css --no-color $FileNameWithoutExtension$ --clean-css --autoprefix="last 5 versions"
clean-css plugin and autoprefixs are only working alone. If I add them together I get the error. Any ideas?

BigCommerce Stencil - TypeError: window.stencilBootstrap is not a function

Since around 10:30am EST today, I have been unable to apply stencil custom themes successfully. Any theme bundled before 10:30am EST today works fine when applied to a storefront. The themes work fine locally, and there are no errors when bundling, but once the theme is applied, the page loads HTML without images or any styling applied. The error in the console reads "TypeError: window.stencilBootstrap is not a function".
I have verified the issue on multiple accounts, and even occurs when trying to bundle and apply a fresh Cornerstone clone.
There are no reported issues on status.bigcommerce.com
Is anyone else having similar issues today?
Do I need to update my CLI?
Thanks
At the time of giving command stencil bundle, it will clear 'assets/dist' files. So that throws error theme-bundle.main.js file missing and window-stencilBootstrap is not a function.To avoid Clearing 'assets/dist' follow below steps.
Comment this below line in webpack.conf.js which is in root folder
/new CleanWebpackPlugin(['assets/dist'], {
verbose: false,
watch: false,
}),/
After this, run stencil bundle 'asset/dist' folder will not clear by doing so. Check u have 'assets/dist' folder then upload. After uploading your theme, front end will works fine.
This is a bug at stencil-cli.
There is an open issue for it: https://github.com/bigcommerce/stencil-cli/issues/379
I have just submitted a pull request with a possible fix: https://github.com/bigcommerce/stencil-cli/pull/409
In the issue, I suggest a workaround which can be done in the theme, without having to modify stencil-cli.
At stencil.conf.js, remove these two lines from the top of the file:
var webpack = require('webpack');
var webpackConfig = require('./webpack.conf.js');
Copy them as the initial lines of development and production functions, where these variables are actually used.
This change usually fixes the issue.