Setting up Karma for my React app has proven to be a challenge. Here is the stack I am working with:
- Karma
- React
- Webpack
- Typescript
To make my React app function properly, I require some custom typings in src/typings.d.ts:
declare module '*.json' {
const value: any;
export default value;
}
//Unfortunately, there are no definitions available for redux-persist version 5. :(
declare module 'redux-persist';
declare module 'redux-persist/es/integration/react';
declare module 'redux-persist/es/storage';
This is how my karma.conf.ts file is structured:
const karma = (config: any) => {
config.set({
basePath: '',
browsers: ['ChromeHeadless'],
frameworks: ['mocha'],
files: ['test/actions/errorTests.ts'],
preprocessors: {
'test/actions/errorTests.ts': ['webpack']
},
webpack: {
entry: ['./src/main.tsx'],
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: '/node_modules/',
use: 'awesome-typescript-loader'
}, {
test: /\.scss$/,
exclude: '/node_modules/',
use: [{
loader: 'style-loader'
}, {
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
sass: true
}
}, {
loader: 'sass-loader',
query: {
sourceMap: true
}
}]
}
]
}
},
webpackMiddleware: {
noInfo: true
}
});
};
export = karma;
Upon running karma start --single-run, the following output is produced:
$ karma start --single-run
[at-loader] Using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c68656c796f7f6e756c685c2e3229322e">[email protected]</a> from typescript and "tsconfig.json" from /Users/rbu0374/Development/octodent/octodent.git/client/tsconfig.json.
(at-loader] Checking started in a separate process...
[at-loader] Ok, 0.721 sec.
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 4 errors
Hash: 22917d06732ce0b1f6aa
Version: webpack 3.6.0
Time: 2234ms
Asset Size Chunks Chunk Names
main 1.29 MB 0 [emitted] [big] main
test/actions/errorTests.ts 344 kB 1 [emitted] [big] test/actions/errorTests.ts
...
It seems that my typings file is being ignored for some reason. Any insights on why this might be happening would be greatly appreciated!
Thank you for your help!