[Bug] Problem to test my units tests with mochapack

[zak39]

• I'd be willing to submit the fix

Describe the bug

I am working on the Workspace app, which is an extension for Groupfolders' app for Nextcloud.

I had encounter conflicts with dependencies with NPM and I was able to solve them.
But, when I try to test my app, I have this error message :

$ npm test

> [email protected] test
> NODE_ENV=testing mochapack --webpack-config webpack.test.config.js --require src/tests/OC.js "src/tests/**/*.js"

Building workspace 1.0.0 

  [                         ] 0% () WEBPACK  Compiling...

  [===                      ] 10% (building)Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
  [=======================  ] 92% (sealing) WEBPACK  Failed to compile with 2 error(s)

Error 

  The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'http://localhost/eslintrc.cjs'

Error 

  The URL must be of scheme file

  [=========================] 100% (completed)

To Reproduce

Following this PR : arawa/workspace#413

I install all dependencies

$ make
make composer
make[1] : on entre dans le répertoire « /home/zak/Documents/arawa/codes/workspace »
composer install --prefer-dist
No lock file found. Updating dependencies instead of installing from lock file. Use composer update over composer install if you do not have a lock file.
Loading composer repositories with package information
Updating dependencies
Lock file operations: 38 installs, 0 updates, 0 removals
  - Locking christophwurst/nextcloud (v22.1.1)
  - Locking doctrine/instantiator (1.4.0)
  - Locking myclabs/deep-copy (1.10.2)
  - Locking nikic/php-parser (v4.13.2)
  - Locking phar-io/manifest (2.0.3)
  - Locking phar-io/version (3.2.1)
  - Locking phpdocumentor/reflection-common (2.2.0)
  - Locking phpdocumentor/reflection-docblock (5.3.0)
  - Locking phpdocumentor/type-resolver (1.6.0)
  - Locking phpspec/prophecy (v1.15.0)
  - Locking phpunit/php-code-coverage (9.2.11)
  - Locking phpunit/php-file-iterator (3.0.6)
  - Locking phpunit/php-invoker (3.1.1)
  - Locking phpunit/php-text-template (2.0.4)
  - Locking phpunit/php-timer (5.0.3)
  - Locking phpunit/phpunit (9.5.14)
  - Locking psr/container (1.1.2)
  - Locking psr/event-dispatcher (1.0.0)
  - Locking psr/log (1.1.4)
  - Locking sebastian/cli-parser (1.0.1)
  - Locking sebastian/code-unit (1.0.8)
  - Locking sebastian/code-unit-reverse-lookup (2.0.3)
  - Locking sebastian/comparator (4.0.6)
  - Locking sebastian/complexity (2.0.2)
  - Locking sebastian/diff (4.0.4)
  - Locking sebastian/environment (5.1.3)
  - Locking sebastian/exporter (4.0.4)
  - Locking sebastian/global-state (5.0.5)
  - Locking sebastian/lines-of-code (1.0.3)
  - Locking sebastian/object-enumerator (4.0.4)
  - Locking sebastian/object-reflector (2.0.4)
  - Locking sebastian/recursion-context (4.0.4)
  - Locking sebastian/resource-operations (3.0.3)
  - Locking sebastian/type (2.3.4)
  - Locking sebastian/version (3.0.2)
  - Locking symfony/polyfill-ctype (v1.24.0)
  - Locking theseer/tokenizer (1.2.1)
  - Locking webmozart/assert (1.10.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Nothing to install, update or remove
5 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating autoload files
26 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
make[1] : on quitte le répertoire « /home/zak/Documents/arawa/codes/workspace »
npm install -f --no-optional
npm WARN using --force Recommended protections disabled.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 1142 packages, and audited 1143 packages in 1m

143 packages are looking for funding
  run `npm fund` for details

11 moderate severity vulnerabilities

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
make npm-prod
make[1] : on entre dans le répertoire « /home/zak/Documents/arawa/codes/workspace »
npm run build

> [email protected] build
> webpack --node-env production --progress

Building workspace 1.0.0 

asset workspace-main.js?v=521b4fd0435583f142c3 2.36 MiB [compared for emit] [immutable] [minimized] [big] (name: main) 2 related assets
orphan modules 454 KiB [orphan] 143 modules
runtime modules 1.66 KiB 7 modules
modules by path ./node_modules/ 3.41 MiB 462 modules
modules by path ./src/ 296 KiB
  ./src/main.js + 56 modules 232 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/GroupDetails.vue?vue&type=style&index=0&lang=css& 6.29 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/Home.vue?vue&type=style&index=0&id=626d4f56&scoped=true&lang=css& 15.9 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/SpaceDetails.vue?vue&type=style&index=0&lang=css& 11.4 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/SpaceTable.vue?vue&type=style&index=0&lang=css& 4.46 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/Error403.vue?vue&type=style&index=0&id=75693f0c&scoped=true&lang=css& 3.05 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/SelectUsers.vue?vue&type=style&index=0&lang=css& 15 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/UserTable.vue?vue&type=style&index=0&lang=css& 7.55 KiB [built] [code generated]
./img/member.png 1.43 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  workspace-main.js?v=521b4fd0435583f142c3 (2.36 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.36 MiB)
      workspace-main.js?v=521b4fd0435583f142c3


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.69.1 compiled with 3 warnings in 31891 ms
make[1] : on quitte le répertoire « /home/zak/Documents/arawa/codes/workspace »

Then, I run npm test command :

$ npm test

> [email protected] test
> NODE_ENV=testing mochapack --webpack-config webpack.test.config.js --require src/tests/OC.js "src/tests/**/*.js"

Building workspace 1.0.0 

  [                         ] 0% () WEBPACK  Compiling...

  [===                      ] 10% (building)Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
  [=======================  ] 92% (sealing) WEBPACK  Failed to compile with 2 error(s)

Error 

  The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'http://localhost/eslintrc.cjs'

Error 

  The URL must be of scheme file

  [=========================] 100% (completed)

My environment

• OS: Ubuntu 20.04.3
• Node version : 14.19.0
• Npm version : 7.24.0
• Mochapack : ^9.2.1

Information related to webpack :

$ ./node_modules/.bin/webpack --version
$webpack: 5.69.1
webpack-cli: 4.9.2
webpack-dev-server 4.7.4

My package.json

{
  "name": "workspace",
  "version": "1.0.0",
  "description": "Place this app in **nextcloud/apps/**",
  "main": "main.js",
  "private": true,
  "scripts": {
    "build": "webpack --node-env production --progress",
    "dev": "webpack --node-env development --progress",
    "watch": "webpack --node-env development --progress --watch",
    "serve": "webpack --node-env development serve --progress",
    "test": "NODE_ENV=testing mochapack --webpack-config webpack.test.config.js --require src/tests/OC.js \"src/tests/**/*.js\"",
    "test:watch": "NODE_ENV=testing mochapack -w --webpack-config webpack.test.config.js --require src/tests/OC.js \"src/tests/**/*.js\"",
    "lint": "eslint --ext .js,.vue src",
    "stylelint": "stylelint css/*.css css/*.scss src/**/*.vue",
    "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.vue --fix"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/arawa/workspace.git"
  },
  "keywords": [],
  "author": "Arawa <https://www.arawa.fr/>",
  "contributors": [
    {
      "name": "Baptiste Fotia",
      "email": "[email protected]"
    },
    {
      "name": "Cyrille Bollu",
      "email": "[email protected]"
    }
  ],
  "license": "AGPL-3.0-or-later",
  "bugs": {
    "url": "https://github.com/arawa/workspace/issues"
  },
  "homepage": "https://github.com/arawa/workspace#readme",
  "engines": {
    "npm": "^7.0.0",
    "node": "^14.0.0"
  },
  "browserslist": [
    "extends @nextcloud/browserslist-config"
  ],
  "Comments": {
    "devDependencies": [
      "The @nextcloud/eslint-config's version 7.0.2 triggers a problem when we run `npm install`.",
      "We must define the `--force` flag to install these devDependencies.",
      "But, when we run `npm test`, we have an error on the conflicts on the eslint package as peerDependency.",
      "I created an issue on this : https://github.com/nextcloud/eslint-config/issues/294.",
      "One solutions is downgraded theses packages :",
      "- @nextcloud/[email protected]",
      "- @nextcloud/[email protected]",
      "Note: Look at this issue for webpack-vue-config package: https://github.com/nextcloud/nextcloud-vue/issues/2478"
    ]
  },
  "devDependencies": {
    "@nextcloud/babel-config": "^1.0.0",
    "@nextcloud/browserslist-config": "^2.2.0",
    "@nextcloud/eslint-config": "^7.0.2",
    "@nextcloud/stylelint-config": "^2.1.2",
    "@nextcloud/webpack-vue-config": "^5.0.0",
    "@vue/test-utils": "^1.3.0",
    "chai": "^4.3.6",
    "jsdom": "^19.0.0",
    "jsdom-global": "^3.0.2",
    "mocha": "^9.2.1",
    "mochapack": "^2.1.4",
    "prettier": "^2.5.1",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "@nextcloud/axios": "^1.9.0",
    "@nextcloud/l10n": "^1.4.1",
    "@nextcloud/router": "^1.2.0",
    "@nextcloud/vue": "^4.3.0",
    "ramda": "^0.28.0",
    "vue": "^2.6.12",
    "vue-notification": "^1.3.20",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

My webpack.test.config.js :

/**
 * @copyright Copyright (c) 2017 Arawa
 *
 * @author 2021 Baptiste Fotia <[email protected]>
 * @author 2021 Cyrille Bollu <[email protected]>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
/* eslint-disable node/no-extraneous-require */

const path = require('path')
const { merge } = require('webpack-merge')
const webpackConfig = require('@nextcloud/webpack-vue-config')
const nodeExternals = require('webpack-node-externals')

require('jsdom-global')('', {
	url: 'http://localhost',
})

const appName = process.env.npm_package_name
const config = merge(webpackConfig, {
	mode: 'development',
	devtool: 'inline-cheap-module-source-map',
	externals: [nodeExternals()],
	// Overrides the output config provided by Nextcloud as for some reason
	// contenthash doesn't get appended to filenames
	output: {
		path: path.resolve('./js'),
		publicPath: '/js/',
		filename: `${appName}-[name].js`,
		chunkFilename: `${appName}-[name].js`,
	},
})

module.exports = config