Unit testing on browser (Typescript + Webpack)

Question

I want to add unit test to this project. It's a basic webpack + typescript project that will be used by another web application. Unit test should run on browser.

I tried mocha but just import 'mocha' throws compile error. (I have test file in project_folder/test/test.ts which is the entry for 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

If test is written without import statement, there are no compile errors, but at runtime it throws an error because method describe is not defined.

It's important the test to be a typescript file, because typescript classes has to be imported. Is there a library that can be used with typescript + webpack and runs on browser?

test/test.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"
}

Answer 1

Found it.

To the top of webpack.config.js, add

const nodeExternals = require('webpack-node-externals');

and add to the config:

externals: [nodeExternals()]

As a side note, in package.json I have a.o.

"mocha": "6.2.1", 
"webpack": "4.41.0", 
"webpack-node-externals": "1.7.2",