我想将单元测试添加到 this项目。这是一个基本的 webpack + typescript 项目,将被另一个 web 应用程序使用。单元测试应该在浏览器上运行。
我试过 mocha
但只是 import 'mocha'
抛出编译错误。
(我在 project_folder/test/test.ts
中有测试文件,这是 webpack 的入口。)
WARNING in ./node_modules/mocha/lib/mocha.js 219:20-37
Critical dependency: the request of a dependency is an expression
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
WARNING in ./node_modules/mocha/lib/mocha.js 227:24-70
Critical dependency: the request of a dependency is an expression
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
WARNING in ./node_modules/mocha/lib/mocha.js 277:24-35
Critical dependency: the request of a dependency is an expression
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
WARNING in ./node_modules/mocha/lib/mocha.js 327:35-48
Critical dependency: the request of a dependency is an expression
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
WARNING in ./node_modules/mocha/lib/mocha.js 342:23-44
Critical dependency: the request of a dependency is an expression
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
ERROR in ./node_modules/mocha/lib/browser/growl.js
Module not found: Error: Can't resolve '../../package' in 'C:\Users\s1n7ax\Documents\GitHub\open-unicode-converter\node_modules\mocha\lib\browser'
@ ./node_modules/mocha/lib/browser/growl.js 127:13-37
@ ./node_modules/mocha/lib/mocha.js
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
ERROR in ./node_modules/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\s1n7ax\Documents\GitHub\open-unicode-converter\node_modules\mkdirp'
@ ./node_modules/mkdirp/index.js 2:9-22
@ ./node_modules/mocha/lib/reporters/xunit.js
@ ./node_modules/mocha/lib/reporters/index.js
@ ./node_modules/mocha/lib/mocha.js
@ ./node_modules/mocha/browser-entry.js
@ ./test/test.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! open-unicode-converter@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the open-unicode-converter@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\s1n7ax\AppData\Roaming\npm-cache\_logs\2019-03-02T20_59_10_221Z-debug.log
如果在没有导入语句的情况下编写测试,则不会出现编译错误,但在运行时会抛出错误,因为未定义方法 describe
。
测试是一个 typescript 文件很重要,因为必须导入 typescript 类。有没有可以和typescript + webpack一起使用并在浏览器上运行的库?
测试/测试.ts
import 'mocha'
describe('sample', () => {
it('should return something', () => {
})
});
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
let distPath = path.resolve(__dirname, 'dist');
let srcPath = path.resolve(__dirname, 'src');
let testPath = path.resolve(__dirname, 'test');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: "./test/index.test.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
// this copy index.html from test/index.html to dist
new CopyWebpackPlugin([
{from: path.resolve(__dirname, 'test'), to: distPath, ignore: ['*.ts', '*.tsx', '*.js']}
]),
],
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: '[name].js',
path: distPath
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
package.json
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"test:browser": "npm run build && start http://localhost:9000 && webpack-dev-server"
}
最佳答案
找到了。
在 webpack.config.js
的顶部,添加
const nodeExternals = require('webpack-node-externals');
并添加到配置中:
externals: [nodeExternals()]
作为旁注,在 package.json
中我有 a.o.
"mocha": "6.2.1",
"webpack": "4.41.0",
"webpack-node-externals": "1.7.2",
关于typescript - 浏览器单元测试(Typescript + Webpack),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54963128/