fix: test init and karma conf for 8.0 with webpack5 (#5528)

Author: NathanWalker

.travis.yml

@@ -16,7 +16,7 @@ node_js:
 git:
   submodules: true
 install:
-- npm install --ignore-scripts
+- npm install --ignore-scripts --legacy-peer-deps
 before_script:
 - gem install xcodeproj
 - gem install cocoapods

config/test-dependencies.json

@@ -7,8 +7,7 @@
     },
     {
         "name": "karma-webpack",
-        "excludedPeerDependencies": ["webpack"],
-        "version": "3.0.5"
+        "excludedPeerDependencies": ["webpack"]
     },
     {
         "name": "mocha",

lib/commands/test-init.ts

@@ -135,14 +135,18 @@ class TestInitCommand implements ICommand {
 		);
 
 		const testsDir = path.join(this.$projectData.appDirectoryPath, "tests");
-		const relativeTestsDir = path.relative(
+		const projectTestsDir = path.relative(
 			this.$projectData.projectDir,
 			testsDir
 		);
+		const relativeTestsDir = path.relative(
+			this.$projectData.appDirectoryPath,
+			testsDir
+		);
 		let shouldCreateSampleTests = true;
 		if (this.$fs.exists(testsDir)) {
 			this.$logger.info(
-				`${relativeTestsDir} directory already exists, will not create an example test project.`
+				`${projectTestsDir} directory already exists, will not create an example test project.`
 			);
 			shouldCreateSampleTests = false;
 		}
@@ -157,7 +161,11 @@ class TestInitCommand implements ICommand {
 			relativeTestsDir
 		)}/**/*${projectFilesExtension}'`;
 		const karmaConfTemplate = this.$resources.readText("test/karma.conf.js");
-		const karmaConf = _.template(karmaConfTemplate)({ frameworks, testFiles });
+		const karmaConf = _.template(karmaConfTemplate)({
+			frameworks,
+			testFiles,
+			basePath: this.$projectData.getAppDirectoryRelativePath(),
+		});
 
 		this.$fs.writeFile(path.join(projectDir, "karma.conf.js"), karmaConf);
 
@@ -171,11 +179,11 @@ class TestInitCommand implements ICommand {
 				path.join(testsDir, `example${projectFilesExtension}`)
 			);
 			this.$logger.info(
-				`\nExample test file created in ${relativeTestsDir}`.yellow
+				`\nExample test file created in ${projectTestsDir}`.yellow
 			);
 		} else {
 			this.$logger.info(
-				`\nPlace your test files under ${relativeTestsDir}`.yellow
+				`\nPlace your test files under ${projectTestsDir}`.yellow
 			);
 		}
 

lib/controllers/migrate-controller.ts

@@ -238,7 +238,7 @@ export class MigrateController
 		},
 		{
 			packageName: "@nativescript/unit-test-runner",
-			minVersion: "1.0.0",
+			minVersion: "2.0.0",
 			async shouldMigrateAction(
 				dependency: IMigrationDependency,
 				projectData: IProjectData,

package.json

@@ -32,7 +32,7 @@
     "clean": "npx rimraf node_modules package-lock.json && npm run setup",
     "build": "grunt",
     "build.all": "grunt test",
-    "setup": "npm i --ignore-scripts && npm rebuild husky",
+    "setup": "npm i --ignore-scripts --legacy-peer-deps && npm rebuild husky",
     "test": "mocha --config=test/.mocharc.yml",
     "postinstall": "node postinstall.js",
     "preuninstall": "node preuninstall.js",

resources/test/karma.conf.js

@@ -1,8 +1,9 @@
+const filePatterns = [${ testFiles }];
 module.exports = function (config) {
   const options = {
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
+    basePath: '${ basePath }',
 
 
     // frameworks to use
@@ -11,7 +12,7 @@ module.exports = function (config) {
 
 
     // list of files / patterns to load in the browser
-    files: [${ testFiles }],
+    files: filePatterns,
 
 
     // list of files to exclude
@@ -78,6 +79,9 @@ module.exports = function (config) {
 
   config.set(options);
 }
+module.exports.filePatterns = filePatterns;
+// You can also use RegEx if you'd like:
+// module.exports.filesRegex = /\.\/tests\/.*\.ts$/;
 
 function setWebpackPreprocessor(config, options) {
   if (config && config.bundle) {
@@ -100,6 +104,7 @@ function setWebpack(config, options) {
     env[config.platform] = true;
     env.sourceMap = config.debugBrk;
     env.appPath = config.appPath;
+    env.karmaWebpack = true;
     options.webpack = require('./webpack.config')(env);
     delete options.webpack.entry;
     delete options.webpack.output.libraryTarget;