I have Angular project with generated structure by Nx. I have configured Cypress and it worked fine till I want to add custom command cy.el()
This is my commands.ts file:
import './commands.d';
Cypress.Commands.add('el', (id) => {
return cy.get(`[test-id=${id}]`);
});
and commands.d.ts file:
/// <reference types="cypress" />
declare namespace Cypress {
interface Chainable {
el(id: string): Chainable;
}
}
When I try to run some of my test I got error:
Error running plugin
The following error was thrown by a plugin. We stopped running your
tests because a plugin crashed. Please check your plugins file
(\my-project\apps\my-app-e2e\src\plugins\index.js)
TypeError: err.replace is not a function
Related
I am trying to implement something simple: I want my e2e tests run with Cypress and cucumber.
I have an application created with Vue CLI 4.1.1. I added with NPM the package: cypress-cucumber-preprocessor (V1.19.0)
Edit:
After a lot of research and tests, I think I found where the problem comes from, but I don't know how to fix it yet:
The '#vue/cli-plugin-babel/preset' does not seem to be working with
.feature file...
My babel.config.js file is:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Any idea how I can make cli-plugin-babel working with cucumber cypress?
Original message :
I have a Test.feature file, executing steps defined in test.step.js files.
Here is the content of my test.spec.js
import { When, Then } from 'cypress-cucumber-preprocessor/steps';
import { HomePage } from './pages/home.page';
When(/^I open the Home page$/, () => {
let homePage = new HomePage();
homePage.goTo();
});
Then(/^I see "([^"]*)" in the main heading$/, msg => {
cy.contains('h1', msg)
});
And the content of my PageObject home.page.js:
export class HomePage {
goTo() {
cy.visit("/");
}
}
When I run:
npm run test:e2e
I get the following error:
Oops...we found an error preparing this test file:
tests/e2e/features/Test.feature
The error was:
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
- A missing file or dependency
- A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.
These errors does not occur when I use:
export function goToHomePage() {
cy.visit("/");
}
You can checkout my project on Github: https://github.com/truar/cloudcmr-v2 (branch master for the passing case, branch pageObject_pattern for the failing case).
I am assuming this is something related to ES6 and cypress... but I clearly don't know what is going on here. Besides, everything I find on the Internet talks about cypress cucumber and Typescript, which I don't use...
What am I missing?
I found the answer. See this PR for more details : https://github.com/cypress-io/cypress/issues/2945
Basically, there is an incompatibility between Babel 7 and Cypress 3. I had to change the babel.config.js file :
module.exports = process.env.CYPRESS_ENV
? {}
: {
presets: ["#vue/cli-plugin-babel/preset"]
};
It is just a workaround, not a real fix. We have to disable babel when running cypress.
Hope will help you !
I am fairly new to using PubSubJS (along with jQuery, Webpack, React) in a project, and my local server throws the following error
Uncaught TypeError: _pubsubJs2.default.subscribe is not a function
at Object.componentDidMount (SideNavContainer.js?eb9e:44)
...
this line
import PubSub from 'pubsub-js';
...
PubSub.subscribe(OPEN_LAYERS, (_, isOpen) => {
this.setState({ active: isOpen });
this.props.isOpen(isOpen);
});
I've successfully run PubSubJS in a blank test project, and so maybe there's an issue with how Webpack is building? My webpack.config.js file compiles using babel. I'll include more source code if need be!
I need to deploy an Ionic Project, where the Main Developer has left the company and there is no documentation whatso ever left. The problem I have is, that there are Typescript Files, but no Typescript Compiler defined or used in Gulp or anything.
So he probably used a local compiler to do this.
I installed the 1.5.3 Version of Typescript via npm. And my goal was to recursively compile all the files in one directory to one Javascript-File.
What I found online is, to use:
tsc *.ts --out app.js
However I always get the Error:
error TS6053: File '*.ts' not found.
When I compile a single File it works. And I tried it in different terminals.
EDIT: I need to add I have a map.js File of the target app.js. So I know what I need to compile. Is there a way or tool to reverse engineer using this map file?
EDIT2: Example of a File:
/// <reference path="./util.ts"/>
///
module al.driver {
/**
* local machine: false
* smartphone: true
*/
export let cordova = true;
export interface IPreLoadData {
date:Date;
id:String;
}
export var preLoadData: IPreLoadData = {
date:Date,
id:String
}
// event conditions
var docReady = false;
var devReady = false;
// Document ready listener
$(document).ready(function() {
console.info("document ready");
docReady = true;
bootstrapApplication();
});
// Initialize Application
function bootstrapApplication() {
if (docReady && devReady) {
angular.bootstrap(document, ["test"]);
}
}}
I am trying to set up unit testing for a SPA using karma/jasmine
First of all, the following test runs just fine in karma:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
define(["app/domain/core/Collections"], (collections) => {
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list = new collections.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
});
However, collections is of type anyso that I can not use it for type declarations, thus I'm missing intellisense and whatnot when I am writing my tests. No good!
The problem arises when I try to re-write the test to a more TypeScript friendly format:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
import c = require("./../../src/app/domain/core/Collections");
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list: c.Collections.LinkedList<string> = new c.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
This compiles just fine, I get my type information for handy intellisense etc, but now karma throws an error.
It turns out it is trying to load the module without the .js postfix, indicated by the following error messages:
There is no timestamp for /base/src/app/domain/core/Collections!
Failed to load resource: the server responded with a status of 404 (Not Found)
(http://localhost:9876/base/src/app/domain/core/Collections)
Uncaught Error: Script error for: /base/src/app/domain/core/Collections
I'm gonna stop here for now, but if it will help I am glad to supply my karma config file, test-main and so on. But my hope is that someone has encountered this exact problem before and might be able to point me in the right direction.
My typescript is compiled with the AMD flag.
It is not a TypeScript problem. We encountered the same problem. Turns out that karma "window.__karma__.files" array includes all files included in the test, including the .js extenstion.
Now requireJS does not work when supplying the .js extension. To fix it, in our main-test.js file, we created a variable "tests" by filtering all the *Spec.js files and then we removed the .js from the file name as requireJS needs it to be. More information here: http://karma-runner.github.io/0.8/plus/RequireJS.html
Below is how we did it (based on the info supplied in the link above):
main-test.js
console.log('===========================================')
console.log('=================TEST FILES================')
var tests = Object.keys(window.__karma__.files).filter(function (file) {
return /\Spec\.js$/.test(file);
}).map(function (file) {
console.log(file);
return file.replace(/^\/base\/|\.js$/g, '');
});
console.log('===========================================')
console.log('===========================================')
require.config({
baseUrl:'/base',
paths: {
jquery :["http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min", "lib/jquery"],
angular : ["https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min", "lib/angular"],
angularMocks: 'app/vendors/bower_components/angular-mocks/angular-mocks',
},
shim: {
'angularMocks': {
deps: ['angular'],
exports: 'angular.mock'
}
},
deps: tests,
callback: window.__karma__.start
});
Also make sure you have supplied the files to be tested in your karma.config.js file, more details here: http://karma-runner.github.io/0.8/plus/RequireJS.html same as the link above.
Hope it helps
It turns out it is trying to load the module without the .js postfix,
That is the perhaps not the actual source of the error. Actually it is looking at /base/src/app/domain/core/Collections and not app/domain/core/Collections (as in your manual type unsafe way). Notice base/src/ that shouldn't be there.
I'm facing an issue while trying to get javascript unit tests to work at the command line using qunit.
Here's some sample code to reproduce the error:
file util.js:
function abc() {
return 'abc';
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = {
abc: abc
};
}
file util-tests.js
var qunit = require("qunit");
test("Test abc function", function () {
equal(util.abc(), 'abc');
});
With these files, I can run tests using the following command (gives a table-like output in the shell with the test results):
qunit -c util:util.js -t util-tests.js
Now it breaks if I add the following to util.js
$(document).ready(function () {
/* some code here */
});
Here's the error output:
qunit -c util:util.js -t util-tests.js
Testing /home/mfrere/jstst/util.js ... [Error: Uncaught exception in child process.]
same problem with:
var a = $;
or:
var a = document;
So this makes me think that I need to import jQuery somehow, so I thought about adding jquery.js as a dependency to the command, like this:
qunit -c util:util.js -t util-tests.js -d jquery.js
The above command gives me the same 'Uncaught exception' error, even if util.js doesn't contain any reference to '$'.
I'll probably need to do something else to get qunit to recognize 'document' as well, but I don't know what or how.
Now here's my question: what should I do to get this to work? It is important to keep in mind I want to test my files at the command line, not in a browser.
Just in case I did something wrong in the setup process, this is how I installed node/qunit (under ubuntu):
git clone git://github.com/creationix/nvm.git ~/.nvm
in .bashrc, I added the following line:
source ~/.nvm/nvm.sh
picked a specific version of node
nvm install v0.9.2
nvm alias default 0.9
and installed qunit
npm install -g qunit
finally I had to add this in .bashrc as well:
export NODE_PATH=~/.nvm/v0.9.2/lib/node_modules
You haven't imported jQuery:
$ = require('jquery'),
jQuery = require('jquery');
If you're using browserify, change that to 'jquery-browserify'.