I am attempting to add the cypress-angular-unit-test plugin to Cypress.
However, following the instructions provided on the related GitHub page I am getting the following error:
The plugins file is missing or invalid.
/MyProjectName/cypress/plugins/index.js:1
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Again, as instructed, I have added the following to support/index.js
// core-js 3.*
require('core-js/es/reflect');
// core-js 2.*
require('core-js/es7/reflect');
require('cypress-angular-unit-test/support');
And the following to plugins/index.js
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
require('#cypress/code-coverage/task')(on, config);
return config;
};
I've also added the related helper.js and cy-ts-preprocessor.js file to the plugins folder.
I've also added the necessary config to cypress.json
"experimentalComponentTesting": true,
I've even tried adding types/node by adding a tsconfig.json to the cypress folder like so:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"],
"experimentalDecorators": true
},
"include": [
"**/*.ts"
]
}
Changing the target and/or lib values to es6 has no effect.
Changing the import to a require yields a different error which, even if it did work, seems like a hacky solution for some detail I am missing.
¯\_(ツ)_/¯
Not exactly an answer but at least a work around.
Start fresh or uninstall Cypress and cypress-angular-unit-test
Follow the instructions for Nx Cypress install found on here
Go back to cypress-angular-unit-test instructions and ignore this part:
Configure cypress/plugins/index.js to transpile Angular code.
import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
return config;
};
The file cy-ts-preprocessor is here
Related
UPDATE 2021 March 29 : There is a known issue here
How to make pylint-django work together with django-configurations ?
I've setup a Django project in VS code with pylint and django-pylint as linter.
I have a conflict with django-configurations, a package that I use to have different config file depending on environment.
I specify django-settings-module in order for django-pylint to understand django project.
Settings.json in vscode looks like this :
{
// ...
"python.linting.pylintArgs": [
"--load-plugins", "pylint_django", // Works fine
// "--django-settings-module", "project.settings" // Do not work anymore when adding this
],
],
// ...
}
Also I've tried the same config file with another django project that does not use django-configurations and pylint django works well with second line on.
I managed to make this work with this format:
{
"python.linting.pylintArgs": [
"--load-plugins",
"pylint_django",
"--django-settings-module=project.settings"
]
}
I installed browser-image-compression which, as part of its functionality, creates a Worker. Now when I run jest tests, I get the following error:
Test suite failed to run
ReferenceError: Worker is not defined
There are no tests connected to the function which uses browser-image-compression.
The scripts section in package.json has the following two lines
"test": "react-scripts test",
"test:ci": "cross-env CI=true react-scripts test"
Oh, and I have a file for setting up tests. Should I mock Worker in here?
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
Late in responding to this but it could help others - but following this comment helped me with this issue.
If you add the following to its own file - I have mine within the same dir as the setupTests file named workerMock.js:
export default class Worker {
constructor(stringUrl) {
this.url = stringUrl;
this.onmessage = () => {};
}
postMessage(msg) {
this.onmessage(msg);
}
}
Then import that Worker file into your test setup file and add window.Worker = Worker. Your setup file may look like:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
import Worker from 'path-to-your-worker-file-above';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
window.Worker = Worker;
Hope this helps
A better solution is that updating 'browser-image-compression' package to the latest version , this helped me .
As per the vue-sweetalert2 doc, in my main.js, I import and use the plugin:
import VueSweetalert2 from "vue-sweetalert2";
Vue.use(VueSweetalert2);
In my component, ContactForm.vue, I can use:
this.$swal(...)
However, when I test:unit this component, I need to add the import and Vue.use()
import VueSweetalert2 from "vue-sweetalert2";
Vue.use(VueSweetalert2);
and I get an error:
$ vue-cli-service test:unit ContactForm.spec.js
FAIL tests/unit/ContactForm.spec.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue-sweetalert2/src/index.js:2
import swal from 'sweetalert2/dist/sweetalert2.min.js';
^^^^^^
SyntaxError: Unexpected token import
What could be wrong?
UPDATE
the vue-sweetalert2/src/index.js, line 2 faulty line, is:
// #ts-check
import swal from 'sweetalert2/dist/sweetalert2.min.js';
the developer of this wrapper added an index.d.ts fie
import Vue, { PluginObject, PluginFunction } from 'vue';
import * as swal from 'sweetalert2';
...
but it seems not to be taken in account.
SOLVED ...
I added a transformIgnorePatterns in my jest config in package.json
"jest": {
....
"transformIgnorePatterns": [
"/node_modules/(?!vue-sweetalert2).+\\.js$"
],
....
}
I've been trying to set up a React component inside Django with the help of Webpack 4.
To get me starting I went through and read:
Using Webpack transparently with Django + hot reloading React components as a bonus
Tutorial: Django REST with React (Django 2.0 and a sprinkle of testing)
Both these walkthroughs are great. At last, I got it almost working by following the second link even though I use Django 1.11.
The problem I had after following the second link was that hot reloading does not work when using a webpack-dev-server. The problem is that Django cannot read the output file of the webpack-dev-server (gives 404 error) while the main.js can be read. I've read that the dev-server files do only live in memory by default.
To overcome the issue with error 404 on the hot reload files I installed the package write-file-webpack-plugin to write out the file each reloads. Then changed the webpack-config.js to (I deleted some lines to keep it shorter....):
var path = require('path');
//webpack is not needed since I removed it from plugins
//const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var WriteFilePlugin =require('write-file-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
},
entry: [
'./frontend/src/index',
],
output: {
path: path.join(__dirname, 'frontend/static/frontend'),
// Changing the name from "[name]-[hash].js" to not get 1000 files in the static folder.
filename: 'hotreloadfile.js'
},
plugins: [
//This line writes the file on each hot reload
new WriteFilePlugin(),
//This can be removed.
//new webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'})
],
mode:'development',
};
in my package.json I have the follow line among the script tag:
"start": "webpack-dev-server --config ./webpack.config.js",
And in Django I installed webpack-loader with the following lines in settings.py:
STATIC_URL = '/static/'
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'frontend/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
}
}
Finally, in my root component called index.js, I do not need the module.hot.accept(); line
Do you see any drawbacks to this approach? Except that I had to install another package?
Why didn't I get it to work with new webpack.HotModuleReplacementPlugin()?
Here is another approach if you develop frontend in react and backend in django.
I have django server running on port 8000 and react server running on port 3000.
If I add "proxy": "http://localhost:8000" line in package.json of react code, localhost:3000 will do hot-reloading while api call goes to localhost:8000.
I am using ember-cli-sass instead of broccoli-ruby-sass
These are the steps i have done
npm install --save-dev ember-cli-sass
bower install --save foundation
I am getting this error in the console after i started the ember server
I don't understand why it says "File not found: /app/styles/app.scss"
i don't have any app.scss a part from
I am missing something in the configuration, what's the problem exactly?
I am using three sass file
_global.sass
_music.sass
_player.sass
i import them in app.sass
#import global
#import player
#import music
i was reading the https://www.npmjs.com/package/ember-cli-sass and it says
Specify some include paths in config/environment.js:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
I am bit confused about these settings, i need some advices
I think you are getting the error because you may not have changed the name of your app.css file to app.scss
You your app/styles folder you should have a file called app.scss in that file I would put your imports
// app.scss
#import 'foundation';
#import 'global';
#import 'player';
#import 'music';
Then you need to add:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
To your config/environment.js like this:
module.exports = function(environment) {
var ENV = {
modulePrefix: 'test-sass',
environment: environment,
baseURL: '/',
locationType: 'auto',
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
},
EmberENV: {
FEATURES: {
.....
If you are looking to use foundation in your ember-cli app use the ember-cli addon: https://www.npmjs.com/package/ember-cli-foundation-sass
I think ember-cli-sass by default looks for sass files with extension .scss. If you are using file extension of .sass, you need to specify it in sassOptions.
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
],
extension: 'sass'
}
Check https://github.com/aexmachina/ember-cli-sass