Hi, I have a library that contains some overlapping e2e logic used across multiple apps, when I try to import the library into the e2e spec, I get this error when running the e2e tests:
E/launcher - Error: Error: Cannot find module '@content-platform/test-helpers'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
Cli info:
{
"name": "e2e-test-helpers",
"root": "libs/e2e-test-helpers/src",
"test": "../../../test.js",
"appRoot": ""
}
E2E tsconfig:
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc/e2e/home",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
},
"include": [
"../**/*.ts"
],
"exclude": [
"**/*.spec.ts"
]
}
Main Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"target": "es5",
"typeRoots": [
"node_modules/@types",
"types"
],
"lib": [
"es2017",
"dom"
],
"baseUrl": ".",
"paths": {
"@content-platform/*": [
"libs/*"
],
"@apps/*": [
"apps/*"
]
}
},
"exclude": [
"node_modules",
"tmp"
]
}
@vsavkin I would like to know how to properly organize the structure of common e2e tests(for *.po.ts and *.e2e-spec.ts both together and separately)
The errors says "E/launcher - Error: Error: Cannot find module '@content-platform/test-helpers'", but the library name is "e2e-test-helpers". Should not you import:'@content-platform/e2e-test-helpers'?
@vsavkin my bad we also have a different library called (unit) test-helpers, so I was testing it with that as well seeing if it was a naming thing, this is the actual (same) error:
[08:33:27] E/launcher - Error: Error: Cannot find module '@content-platform/e2e-test-helpers'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
To make it work currently I directly referenced the library like so:
// tslint:disable-next-line:nx-enforce-module-boundaries
import { helpers } from '../../../../libs/e2e-test-helpers';
Closing as will not fix.
:( relative path very ugly
... very old but I came across this too, and fixed this just recently in a workspace where I re-use things from an e2e helper lib. the thing is, the protractor e2e tests are executed using ts-node. ts-node does not recoginze the path mappings, that is why you need to use relative paths - but there is a node package called tsconfig-paths that can add this feature to ts-node executions. see #294 of ts-node ... if you need details of how to set this up with nx just let me know, I can share my setup using tsconfig-paths with protractor ...
@skydever actually today I came same problem - could you share you config for tsconfig-paths with protractor ?
@skydever I found it , thanks :)
@skydever can you share your config please
@jhua4 I did it like this:
make sure you have installed tsconfig-paths as dev dependency (obviously)
inside the onPrepare method at protractor.conf.js add the following:
require('tsconfig-paths').register({
project: require('path').join(__dirname, './tsconfig.e2e.json'),
baseUrl: './',
paths: tsConfig.compilerOptions.paths
});
I did a require for the main tsConfig to get the list of paths for the register method, at the top of protractor.conf.js:
const tsConfig = require('../../tsconfig.json');
I think that did the trick. Just ping me if you have any problems (I switched to Cypress, so I am not sure if this is up to date, but I guess so...).
@skydever Can you post how you got this to work with Cypress?
hi @jbarrus
I do not use paths with cypress at the moment 馃 maybe this helps for further analysis (not sure when I have the time). My setup looks like this (#883 seems related, wanted to link it):
nx.json ...) with the following tsconfig.json only (same like the e2e app has):{
"extends": "../../tsconfig.json",
"compilerOptions": {
"types": ["cypress", "node"]
},
"include": ["**/*.ts"]
}
cypress.config like this (but I think this is original):{
"fileServerFolder": "../../dist/out-tsc/apps/my-app-e2e",
"fixturesFolder": "../../dist/out-tsc/apps/my-app-e2e/src/fixtures",
"integrationFolder": "../../dist/out-tsc/apps/my-app-e2e/src/integration",
"pluginsFile": "../../dist/out-tsc/apps/my-app-e2e/src/plugins/index.js",
"supportFile": false,
"video": false,
"videosFolder": "../../dist/out-tsc/apps/my-app-e2e/videos",
"screenshotsFolder": "../../dist/out-tsc/apps/my-app-e2e/screenshots"
}
integration folder is importing relative not using paths (having issues concerning auto imports in vscode, at the moment it is really annoying like mentioned here and using paths would not help concerning the auto-import, but that's a vscode issue I am working around at the moment):import {
something,
anotherThing
} from '../../../../libs/e2e-cypress-helper/src';
tsconfig.e2e.json of the e2e app looks like this (added compilerOptions.lib and cypress to include):{
"extends": "./tsconfig.json",
"compilerOptions": {
"sourceMap": false,
"outDir": "../../dist/out-tsc",
"lib": ["es2015", "dom"],
"types": ["cypress", "node"]
},
"include": ["src/**/*.ts", "../../node_modules/cypress"]
}
... and this is working at my side.
Maybe it helps to be able to use path mappings, would be awesome!
does this work for you too (without paths) or do you have another solution?
related to #1238
Most helpful comment
@jhua4 I did it like this:
make sure you have installed tsconfig-paths as dev dependency (obviously)
inside the
onPreparemethod atprotractor.conf.jsadd the following:I did a require for the main
tsConfigto get the list ofpathsfor theregistermethod, at the top ofprotractor.conf.js:I think that did the trick. Just ping me if you have any problems (I switched to Cypress, so I am not sure if this is up to date, but I guess so...).