I know that there are a lot of question in Stackoverflow about this error, but after read some of them (+-12 questions) I don't get nothing.
My context is that I'm trying to build a npm package (my first package); in this Package there are some class that help to write Cypress more easily.
This is one the clases I want to load throught a npm package:
// node_modules/prueba-para-oskar/src/Helpers/Fields/TextField.js
class TextField {
/**
*
* @param {string} value
* @param {string} selector
* @param {object} options
*/
type(value, selector, options) {
this[options.widget](value,selector);
}
/**
*
* @param {string} value
* @param {string} selector
*/
ckeditor(value, selector){
cy.ckeditor(value, selector)
}
noCkeditor(value, selector){
cy.get(selector).type(value);
}
}
module.exports = TextField;
This is my package index.js
// node_modules/prueba-para-oskar/src/index.js
const TextField = require('./Helpers/Fields/TextField');
module.exports = {
TextField
}
And this is my cypress page object
// cypress/e2e/pages/ArticlePage.js
// If I load the file as class that are in the same folder than Cypress
// (not mpn package) they works without problems.
import { Property } from "../../support/Helpers/lib/Property";
import { Submit } from "../../support/Helpers/lib/Submit";
import { FileField } from "../../support/Helpers/Fields/FileField";
import { TextAreaField } from "../../support/Helpers/Fields/TextAreaField";
// import { TextField } from "../../support/Helpers/Fields/TextField";
import { TextField } from "prueba-para-oskar";
export default class ArticlePage {
article_path = "/node/add/article";
tagInput = 'input[data-drupal-selector="edit-field-tags-target-id"]';
submitButton = 'input[data-drupal-selector="edit-submit"]';
constructor() {
this.Property = new Property();
this.FileField = new FileField();
this.TextAreaField = new TextAreaField();
this.TextField = new TextField();
this.Submit = new Submit();
}
userCanAccesArticlePage() {
cy.visit(this.article_path, { failOnStatusCode: true });
}
havePermissionsToSeeNodeAddArticle() {
cy.location("pathname").should("eq", this.article_path);
}
clickSubmitButttom() {
cy.get(this.submitButton).click();
}
}
The error appears when I try to load TextField inside ArticlePage.js
Any idea how to load the class from the npm pagacke to the ObjecPage class?
Thanks.
Please refer to the answer for this question
module.exports vs. export default in Node.js and ES6
Hope it helps :)
After take a walk and read again the link from Aleksa Djukic I have resolved my problem in this way:
// node_modules/prueba-para-oskar/src/index.js
module.exports.TextField = require('./Helpers/Fields/TextField');
// cypress/e2e/pages/ArticlePage.js
// Instead of import I use require.
const TextField = require("prueba-para-oskar").TextField;
// cypress/support/step_definitions/articlePage.js
// Instead of import I use require.
const ArticlePage = require('../../e2e/pages/ArticlePage');
// I have to inicialice the class
const articlePage = new ArticlePage();
In an npm package, generally the index,js is at the root of the package not in /src.
Try this way
// node_modules/prueba-para-oskar/index.js
const TextField = require('./src/Helpers/Fields/TextField');
module.exports = {
TextField
}
Also (alternativiely) try adding a main entry to package.json
For example look at node_modules/core-util-is/package.json
{
"name": "core-util-is",
"version": "1.0.2",
"description": "The `util.is*` functions introduced in Node v0.12.",
"main": "lib/util.js",
"repository": {
...
so your package.json
{
"name": "prueba-para-oskar",
"version": "1.0.0",
"main": "src/index.js",
"scripts": {
...