I'm planning to setup env for testing in Visual Studio Code IDE.
The problem that I have is that VS Code in any XXX.test.js file don't know what is browser or page variable. I'm receiving such errors:
'page' is not defined.eslint(no-undef)
Is this something related only to IDE that I'm using? Some plugin from this IDE? Or maybe it is normal for jest-puppeteer and I need to get used to it?
The whole test when it runs works ok but it seems that IDE only don't know what is page.
I'm working right now on this simple example and I'm just learning this but I'm trying to setup env for it in the same time. My Network.test.js file looks like this. No imports or require at all at the top of the file.
describe("Google", () => {
beforeAll(async () => {
await page.goto("https://google.com");
});
it('should display "google" text on page', async () => {
await expect(page).toMatch("google");
});
});
Later I need to switch it to Typescript which I think will be also a challenge. Now I just want to focus on pure javascript approach.
How to get rid of this IDE errors that are not errors in reality?
Add the Puppeteer globals, Page and Browser, to your ESLint config.
Then, add the following to your .eslintrc file:
env: {
jest: true,
},
// Puppeteer globals
globals: {
page: true,
browser: true,
},
See Here : Link
Related
I modified the Svelte starter template so CoffeeScript can be used via svelte-preprocess. VS Code displays "problems" for Svelte files because the CoffeeScript is being interpreted as JavaScript:
Note this is only a problem with the VS Code tooling; when the project is built the CoffeeScript is correctly detected and compiled into JavaScript.
Why is VS Code processing the CoffeeScript as JavaScript? Steps I tried to configure VS Code for Svelte + CoffeeScript:
Install Svelte for VS Code extension.
Add svelte.config.js file in project root, per these instructions:
If a svelte file contains some language other than html, css or
javascript, svelte-vscode needs to know how to preprocess it. This can
be achieved by creating a svelte.config.js file...
Restart the language server.
At first I tried the simple svelte.config.js from the instructions above. Then I modified it to ensure both Svelte language tools and rollup use the exact same configuration:
// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
function createPreprocessors() {
return sveltePreprocess({
defaults: {
markup: 'pug',
script: 'coffeescript',
style: 'css'
},
coffeescript: {
bare: true
}
})
}
module.exports = {
preprocess: createPreprocessors(),
createPreprocessors
};
I have also confirmed VS Code correctly processes pure CoffeeScript files with .coffee extension.
The entire project is available at: github.com/Leftium/svelte-coffeescript-pug
Do you also have this issue when using <script lang="coffee">?
I've created a vue3 cli project with Mocha testing:
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
Then in Visual Code I install the Mocha Test Explorer extension, restart, add the folder to the workspace, click the folder, ctrl-shift-p and Mocha Test Explorer : "Enable for a workspace folder". Out of the box Mocha Test Explorer doesn't seem to like vuecli's example.spec.js test:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I add this entry to settings.json so that Test Explorer finds the vue "tests" folder, which is different from the default of "test".
"mochaExplorer.files": ["tests/**/*.spec.js"],
And then receive this error in Test Explorer:
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
This indicates I have some transpiling work to do, and Mocha Test Explorer indicates the way to do that is the "mochaTestExplorer" fields in settings.json, but I'm not sure what combination of babel packages would be required. What should be done to run this out-of-the-box vue-cli-3 test in Mocha Test Explorer in Visual Studio Code? Here is my current guess:
"mochaExplorer.require": [
"#babel/preset-env",
"#babel/register",
"#babel/polyfill",
"#babel/plugin-transform-runtime"
],
First, add #babel/register in yours devDependencies.
After, add in your Visual Studio Code settings.json:
"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
"NODE_ENV": "test"
},
"mochaExplorer.require": [
"#babel/register"
]
Finally, changes your babel.config.js to like this:
const presets = [];
if (process.env.NODE_ENV === 'test') presets.push('#babel/preset-env');
else presets.push('#vue/cli-plugin-babel/preset');
module.exports = {
presets,
};
I'm afraid what you want is not possible - problem is it is not enough to setup Babel correctly. Vue single file components (.vue) need to be processed by Vue Loader which is Webpack loader plugin.
And there is no easy way how to setup Mocha Test Explorer to use webpack as indicated by the author himself in this thread - Support for vue cli projects
So I decided to split my tests into two groups, tests/ui (tests using Vue components) and tests/unit (non-ui tests) and use setup described by Fernando with these modifications:
Configure Mocha Test Explorer to only search for non-ui tests:
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json:
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...to include both folders when running tests from command-line
Note: Last step - modifying babel.config.js - is not needed, everything works fine without it....
On a slightly different config, i worked for me: in .vscode/settings.json
{
"mochaExplorer.require": "esm"
}
esm should also be in your dev dependencies
I am using nuxt.js and with this image lazyload plugin
This works great, but now I want to use some options of the plugin, like a custom loader image.
The code would look like this in my nuxt plugin file:
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
const options = {
preLoad: 1.3,
loading: '~/static/media/loader.svg',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
}
Vue.use(VueLazyload, options)
In the plugins docs there is an example using a path like this:
loading: 'dist/loading.gif',
But I want to see the loading not only after I generated a dist folder, I want to see in locally.
So my question is:
How would I set paths in a Vue plugin file to make them work locally and after nuxt generate?
As an example: in CSS files you can set url('~/static/…PATH')
I have not found anything here:
https://nuxtjs.org/guide/directory-structure/
nor here
https://nuxtjs.org/guide/assets
As #Aldarund correctly proposed
loading: require('~/static/media/loading.svg'),
works perfectly.
Thanks 👍🏼
What process do you use to develop Babel 6 plugins?
Here's what I came up with to develop a plugin (babel-plugin-test):
1) In an empty folder run:
npm install babel-cli babel-preset-es2015
2) Create the file src/test.js (to test the plugin) with just:
class Person {
}
3) Create the folder node_modules/babel-plugin-test with the following contents
node_modules/babel-plugin-test/package.json
{
"name": "babel-plugin-test",
"version": "0.1.0",
"main": "lib/index.js",
"dependencies": {
"babel-runtime": "^5.0.0"
},
"devDependencies": {
"babel-helper-plugin-test-runner": "^6.3.13"
}
}
node_modules/babel-plugin-test/src/index.js
export default function ({types: t }) {
return {
visitor: {
ClassDeclaration: function (node, parent) {
console.log("XXX");
}
}
};
}
4) Create a script that runs:
node_modules/babel-plugin-test/babel --presets es2015 --out-dir lib src
babel --plugins babel-plugin-test --presets es2015 --out-dir out src
So it compiles the plugin and then compiles test.js using the plugin and I see the console log and the output file (in this example I'm not changing anything).
There has to be a better way to do this. Maybe some way to use WebStorm or another Node debugger to put a breakpoint and play around (at least be able to inspect variables).
The way to go is to run babel in code so you can get the transpiled code and compare against what you expect.
First transpile your plugin as you did, then in the test folder
var transformFileSync = require('babel-core').transformFileSync
var path = require('path')
var fs = require('fs')
var plugin = require('../lib/index').default
describe('My test', function (){
it ('Transform', function(){
var transformed = transformFileSync(path.join(__dirname, 'testFilePath'), {
plugins: [[plugin]]
}).code
var expectedCode = fs.readFileSync(..)
assert.equal(transformed, expected)
})
})
You can find an example here. It is also possible to write the tests in ES6 importing modules, for that you need to provide mocha with a compiler, see here for an example.
For basic testing I use the wonderful astexplorer. Just set the parser to babylon 6 and turn on transform and set it to babelv6. Then you can put your code in one pane, see the AST results in another, put your babel plugin in a third pane and see the plugin result in the fourth.
For a more complicated test I create two projects, one for the plugin and another one i want to test the plugin on. I npm link the two and configure the test project to use my plugin in babelrc. Then, whenever my plugin changes i just run babel on my file/project and see the results.
Im not sure if this is the best way but it works for me.
I've just tried using JPM for the first time, and I can't get anything to work.
My index.js file looks like this:
const actionButton = require('sdk/ui/button/action');
const TAG = "Addon Scratchpad / Index ";
console.log(TAG+'in index.js');
var button = actionButton.ActionButton({
id: "my-button",
label: "my button",
icon: {
"16": "./tool-scratchpad-16.png",
"32": "./tool-scratchpad-32.png"
},
onClick: function() {
debugger;
console.log(TAG+'button clicked');
}
});
The Folder structure is standard: index.js and package.json files and a data folder with the button png assets.
jpm run results in the browser opening. But no button is generated, there are no errors in the terminal or console, the addon debugger claims "This page has no sources."
jpm test results in no tests being run and no errors thrown.
jpm run --debugger doesn't launch the debugger.
There were no errors during JPM installation (I uninstalled and reinstalled globally to check).
index.js is in the root of the directory, which isn't what I'm used to, but this is apparently normal:
your main file is "index.js", and it is found directly in your add-on's root.
If I unpackage the xpi it looks normal. If I install it by dragging to Firefox the same issues persist.
I'm stumped. Any ideas why I can't get it to work?
jpm 0.0.25 has some important changes in it that will only work with Firefox 38 ( the current nightly version ).
The quick fix for now is to pin your jpm version at 0.0.23:
npm install -g jpm#0.0.23
I logged this jpm issue: https://github.com/mozilla/jpm/issues/261