Updates
Based on comments and further tests I now suspect that the problem has somewhat to do with access restriction on the path, not the path itself. It's however not clear to me what actually is the cause, as there is no clear hints of it.
I now use another project for my evaluation, without access control, and it works. So the problem seems to be related to access control.
I leave the question as is, for future reference.
I am following this Cypress Quickstart: Vue guide to try out the new component testing for Vue. I already have "e2e" Cypress test working, and it's seemingly some basePath or other configuration/path issues, specifically with component test, I am dealing with now.
Problem
The browser does not carry out the test, waiting forever, saying in the dev tools console:
http://localhost:8080/__cypress/iframes/C:/work/swisscom/prixx/WebGui/Web/cypress/components/PersonEdit.cy.js....404 Not Found
I get the following error in the VS Code terminal:
GET /__cypress/iframes/C:/work/swisscom/prixx/WebGui/Web/cypress/components/PersonEdit.cy.js 404 49.560 ms - 105
Setup
Here's my cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
...
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require('./cypress/plugins/index.js')(on, config);
},
baseUrl: 'http://localhost:2623/'
},
component: {
devServer: {
framework: 'vue',
bundler: 'webpack'
}
}
});
It's Vue2, Webpack, Cypress v10.6.0, using Google Chrome.
I start the Cypress controlled Browser from the Cypress App (Google Chrome points at http://localhost:8080/__/#/specs)
When clicking the test, the address bar in the browser now shows "http://localhost:8080/__/#/specs/runner?file=cypress/components/PersonEdit.cy.js" which looks reasonable
What I have tried/found
The test file exists a the given absolute location. However, I consider the use of this absolute path a telltale sign of my problem.
I have a baseUrl configured for e2e, but I can not find a way to configure one for component testing
The config, when inspected with the controlled browser shows the following:
From http://localhost:8080/__/#/settings, "Resolved Configuration":
//...
arch: 'x64',
baseUrl: null,
//...
Somehow, the controlled browser translates the relative path to an absolute path. Why is that?
Question
How can I fix/configure the path for fetching my Cypress Component Test spec?
Related
I am following the article describing setting up module federation: https://nx.dev/l/a/guides/setup-mfe-with-angular
Starting with generating the workspace, adding the angular plugin, and adding the dashboard application.
When serving the dashboard application I get an error from styles.js:
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
It is being loaded as:
<script src="styles.js" defer></script>
Doing some quick searches seems to indicate that this thing should have type="module" on it.
However there doesn't seem to be any kind of configuration I can find to modify the line being added to the index.html.
I have checked the regular template generated by angular, it uses the defer style to everything, so the other js file entries are being changed to type="module" some place. The normal styles.js also does not contain any "import.meta" string.
Any solution would be helpful.
TL;DR: thats fine. You should not see this error in the production
There is a note on the https://nx.dev/guides/setup-mfe-with-angular you mentioned saying:
NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the styles.js file to the index.html in a tag with defer.
It needs to be attached with type=module, but doing so breaks HMR. There is no way of hooking into that process for us to patch it ourselves.
The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file, so there's no erroneous JS to log an error. It's worth reiterating that there's been no actual errors or breakages noted from our tests.
Check the scriptType
This issue has to do with how the imports are set up in the compiled app. You can update the scriptType in your webpack.config.js by adding the scriptType:
module.exports = {
output: {
uniqueName: "YourUniqueAppName",
publicPath: "auto",
scriptType: "text/javascript"
},
Below are the two error (image) I’m facing
I’m using Ionic 4.
everything works but as soon I start calling WooCommerce API and use it in constructor I get the below two errors.
I have imported Woocommerce API, but when I initialize it in constructr it shows both of this error.
It looks like you are using this package which has an obsolete warning:
2019-07-29: This client is obsolete and will no longer receive updates, a new JavaScript library is available under the name of #woocommerce/woocommerce-rest-api.
However, that's a node.js package. It's failing because fs stands for filesystem and that doesn't exist in the browser.
Node.js is for local development, not for browser packages, which is what Ionic 4 is built with.
However, if you really want to use it then this guide will show you how to wrap it up using browserify:
Transforming a Node.js Module to A Browser Library
The solution is to use Browserify to bundle the module with all its dependencies inside one JavaScript file so we will not need any external Node.js dependencies which are not available inside the Cordova webview (a headless browser) used by Ionic 4.
https://www.techiediaries.com/woocommerce-ionic-2/
I don't know how far you'll get as it's for Ionic 2 but I'm just showing you this to demonstrate that node.js packages are not for Ionic.
Update
Based on your comments you say you are having problems with global not being defined.
Searching Google this seems to be a solved issue, try:
I think for now the best option would be to include
(window as any).global = window;
In your polyfills.ts file, as mentioned here:
angular/angular-cli#9827 (comment)
You have to go to folder \node_modules\#angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js and replace node: false, by node: { crypto: true, stream: true, fs: "empty", net: "empty", tls: "empty" },
It's working for me.
i've got a karma-webpack2-qunit setup with babel loader working. es6 is used for both src and test js files.
when running karma in autowatch mode, any changes to source files are detected and karma re-runs the test suite again but the changes are not picked up.
based on this note from the webpack-karma integration page: webpack-karma middleware info , this seems like the config option i need to get the setup fully working.
"This loader provides a webpackBlocker middleware that will block tests from running until code recompiles."
i can't find any examples of using the webpackBlocker configuration.
does someone have a working config they can share?
here's what i'm using in karma.config.js:
the karma test suite is working still but code changes to source or test code do not get reflected in the next run.
i finally got this working. had a mismatch in my "files" pattern config for my test and source files including the "context" object.
now when i modify either test or source js files, the code is compiled first and the tests are rerun in autowatch mode. yay !!!
will post the full working solution to a GitHub repo in case anybody else wants to get the same "unholy" :-) combination (karma + qunit + webpack + es6 + mocha reporter + phantomjs) working. will also add linting.
I would like to create a test suite which will be run with karma against my app which is using webpack to build itself. I have two entrypoints, app and vendors. These are set up through my webpack.config.js file here. The resulting bundle.js should contain both of these entrypoints in its generated file.
My karma (mocha) tests residing in test/spec/*_spec.js are currently pointing to specific components, via require statements like:
var app = require('../src/scripts/App')
They also utilize react/jsx which seems to be causing problems during the test run where I get jsx errors:
Module parse failed: /Users/dmarr/src/status/test/spec/app_spec.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
I'd like to keep test runs quick as possible as well as fast build times for testing with webpack-dev-server during development by minimizing babel transforms to only where needed.
What do I need to do in karma.conf.js to get my builds working? Here is the karma.conf.js file I'm playing around with.
Note, that I do have this working without breaking out the vendor bundle here: https://github.com/bitwise/status
Thanks for any help,
Dave
In a similar setup, disabling CommonsChunkPlugin (for testing only) worked for me. Give it a shot!
I've used Yeoman to make a quick project skeleton using the yo webapp generator command. In the resulting Gruntfile I see that it's setup to compile CoffeeScript but it seems like its just sticking compiled files in a tmp folder.
coffee: {
dist: {
files: {
'.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
}
},
},
How do these get included in the project during development. I'm not using RequireJS.
The yeoman docs are unclear on how to use coffeescript. They only mention that it gets automatically compiled.
Using yeomen 1.0.0-rc1.4. I use:
$ yo angular --coffee
The resulting project has controller and app scripts in CoffeeScript.
grunt configuration file remains in js (what is not really a problem).
Running
$ grunt test
runs tests and all seems fine.
$ grunt server
is also doing what one expects (build the app, test it, starts server, opens the app in web browser and starts watching for changes, so if I change a coffee script file, it is quickly reflected in the web broser.
Documentation also states, one can use yo to add particular pieces like
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:decorator
angular:view
each can be called with a --coffee switch and get the script in CoffeeScript, e.g.:
yo angular:controller user --coffee
I just found an issue in the github repo referencing this problem. https://github.com/yeoman/generator-webapp/issues/12
It offers a temporary solution: https://github.com/yeoman/generator-webapp/issues/12#issuecomment-13731929