javascript - Mocha med webpack kan inte lösa modul

Jag försökte köra mocha-tester i mitt projekt. När jag kör npm-kommandot får jag följande fel:

> [email  test /home/serperga/falcon/falcon-project/frontend
> mocha-webpack


ERROR in ./test/src/app/components/contact-us/contact-us.spec.ts
Module not found: Error: Can't resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
  Parsed request is a module
  using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
    resolve as module
      /home/serperga/falcon/falcon-project/node_modules doesn't exist or is not a directory
      /home/serperga/falcon/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      /home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules doesn't exist or is not a directory
      /home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules doesn't exist or is not a directory
      /home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules doesn't exist or is not a directory
      /home/serperga/falcon/falcon-project/frontend/test/src/node_modules doesn't exist or is not a directory
      /home/serperga/falcon/falcon-project/frontend/test/node_modules doesn't exist or is not a directory
      looking for modules in /home/serperga/falcon/falcon-project/frontend/node_modules
        using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
          using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules/main/src/app/components/contact-us/contact-us)
            as directory
              /home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
            Field 'browser' doesn't contain a valid alias configuration
            /home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
      looking for modules in /home/serperga/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        as directory
          /home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
        Field 'browser' doesn't contain a valid alias configuration
        /home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
[/home/serperga/falcon/falcon-project/node_modules]
[/home/serperga/falcon/node_modules]
[/home/serperga/node_modules/package.json]
[/home/node_modules]
[/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/node_modules]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us/package.json]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js]
 @ ./test/src/app/components/contact-us/contact-us.spec.ts 2:0-74
 @ ./test/src object Object
 @ ./.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js

/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3
import { By } from '@angular/platform-browser';
^
Error: Cannot find module "main/src/app/components/contact-us/contact-us"
    at Object.map../app/components/contact-us/contact-us.spec.ts (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3:1)
    at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
    at webpackContext (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src object Object:5:1)
    at Array.forEach (native)
    at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js:6:1)
    at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
    at /home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:63:1
    at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/17ee8e5ef87ab9f1f1c6d5078648f449-output.js:67:10)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:495:10)
    at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/cli/runner.js:59:11
    at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/webpack/createCompiler.js:72:7)
    at Compiler.applyPlugins (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:61:14)
    at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:226:13)
    at Compiler.emitRecords (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:319:37)
    at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:220:12)
    at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:312:11
    at Compiler.applyPluginsAsyncSeries (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:131:46)
    at Compiler.afterEmit (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:309:8)
    at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:304:14)
    at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:246:17)
    at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /home/serperga/falcon/falcon-project/frontend/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:114:15)
npm ERR! Test failed.  See above for more details.

Min package.json-fil är :

{
  "name": "Frontent",
  "version": "0.0.0",
  "description": "frontent",
  "repository": {
    "type": "git"
  },
  "author": {
    "name": "Vishu"
  },
  "license": "MIT",
  "private": true,
  "engines": {
    "node": ">=6.4"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --display-chunks",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "clean": "del-cli target",
    "heroku-postbuild": "npm run build",
    "lint": "run-s lint:js lint:ts",
    "lint:js": "eslint -c .eslintrc.yml *.js src server",
    "lint:ts": "tslint 'main/src/**/*.ts'",
    "prebuild": "npm run clean",
    "pretest": "npm run lint -s",
    "server": "cross-env NODE_ENV=development nodemon -w 'server/**/*.*' server/main.js",
    "server:dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
    "start": "npm run server:dev",
    "test": "mocha-webpack",
    "test:watch": "mocha-webpack --watch",
    "version": "npm run changelog && git add CHANGELOG.md",
    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json"
  },
  "dependencies": {
    "compression": "~1.6.2",
    "express": "~4.14.0",
    "helmet": "~2.2.0",
    "serve-favicon": "~2.3.0",
    "winston": "~2.2.0"
  },
  "devDependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.1",
    "@compodoc/compodoc": "^1.0.0-beta.9",
    "@types/chai": "^3.4.34",
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.41",
    "@types/sinon": "^1.16.32",
    "angular2-template-loader": "^0.4.0",
    "autoprefixer": "~6.4.1",
    "awesome-typescript-loader": "^2.2.4",
    "chai": "^3.5.0",
    "conventional-changelog-cli": "~1.2.0",
    "copy-webpack-plugin": "~3.0.1",
    "core-js": "~2.4.1",
    "cross-env": "~3.0.0",
    "css-loader": "~0.25.0",
    "del-cli": "~0.2.0",
    "eslint": "~3.6.0",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "~2.22.0",
    "immutable": "~3.8.1",
    "jasmine-core": "~2.5.2",
    "jsdom": "^9.8.3",
    "json-loader": "~0.5.4",
    "karma": "~1.3.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-jasmine": "~1.0.2",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "~2.2.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "~0.3.7",
    "karma-webpack": "~1.8.0",
    "mocha": "^3.1.2",
    "mocha-webpack": "^0.7.0",
    "morgan": "~1.7.0",
    "node-sass": "~3.10.0",
    "nodemon": "~1.10.2",
    "npm-run-all": "~3.1.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss-loader": "~0.13.0",
    "raw-loader": "~0.5.1",
    "rimraf": "^2.5.2",
    "rxjs": "5.0.0-beta.12",
    "sass-loader": "~4.0.2",
    "sinon": "^2.0.0-pre.4",
    "style-loader": "~0.13.1",
    "ts-helpers": "~1.1.1",
    "ts-loader": "~0.8.2",
    "tslint": "~3.15.1",
    "typescript": "2.0.10",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-server": "2.1.0-beta.4",
    "webpack-md5-hash": "~0.0.5",
    "webpack-merge": "^0.14.0",
    "webpack-node-externals": "^1.5.4",
    "zone.js": "~0.6.25"
  }
}

Jag använde webpack-konfigurationsguiden i Angular 2 officiella konfiguration. Detta är min projektstruktur:

Min mocha-test-shim.js konfigurationsfil är:

var jsdom = require('jsdom')

// setup the simplest document possible
var document = jsdom.jsdom('<!doctype html><html><body></body></html>');

// get the window object out of the document
var window = document.defaultView;

global.document = document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

Fil webpack.common.js är

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'polyfills': '../main/src/polyfills.ts',
    'vendor': '../main/src/vendor.ts',
    'app': '../main/src/main.ts'
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('main/src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('main/src', 'app'),
        loader: 'raw'
      }
    ]
  }
};

Och webpack.test.js är:

var helpers = require('./helpers');

module.exports = {
  devtool: 'cheap-module-source-map',
  
  entry: {
    'app': '../main/src/main.ts'
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: 'null'
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  }
}

Någon idé varför jag får detta fel?

Svar #1

Jag har följt samma väg och bestämde mig till slut för att inte använda webpack när jag kör mina tester.

Om det är ett hållbart alternativ för dig, kan du prova följande:

1. låt mocha kompilera dina filer:

   "scripts": { "test": "mocha --compilers ts:ts-node/register app " }

2. konfigurera TestBed för att läsa din resurs från filsystemet

   testing.TestBed.initierTestMiljö( browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting() ); testing.TestBed.konfigureraKompilator({ leverantörer: [ { tillhandahålla:require('@angular/compiler').ResourceLoader, användVärde:{ få:function(url){ var innehåll=require('fs').readFileSync('./app/lib/' + url) .toString(); return innehåll; } } }], användJit: true });

Du kan se att detta tillvägagångssätt används i detta fungerande exempel: https://github.com/ericminio/learning-typescript/blob/master/app/angular.component.spec.ts

Hoppas det hjälper