2

我试图在我的项目中运行 mocha 测试。当我执行 npm 命令时，我得到下一个错误：

> Frontent@0.0.0 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.

我的 package.json 文件是：

{
  "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"
  }
}

我在Angular 2官方配置中使用webpack配置教程。这是mi项目结构： 在此处输入图像描述在此处输入图像描述

我的 mocha-test-shim.js 配置文件是：

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());

webpack.common.js 文件是

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'
      }
    ]
  }
};

而 webpack.test.js 是：

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'
      }
    ]
  }
}

知道为什么我会收到此错误吗？

4

1 回答 1

1

我一直在走同样的路，最终决定在运行测试时不使用 webpack。

如果这对您来说是一个可行的选择，您可以尝试以下方法：

  1. 让 mocha 编译你的文件：

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

  2. 配置 TestBed 以从文件系统中读取您的资源

    testing.TestBed.initTestEnvironment( browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting() ); testing.TestBed.configureCompiler({ providers: [ { provide:require('@angular/compiler').ResourceLoader, useValue:{ get:function(url){ var content = require('fs').readFileSync('./app/lib/' + url) .toString(); return content; } } }], useJit: true });

您可以在此工作示例中看到该方法：https ://github.com/ericminio/learning-typescript/blob/master/app/angular.component.spec.ts

希望有帮助

于 2017-11-07T17:53:21.840 回答