React/Redux Karma Unit Testing Example #470

New Issue

fergalmoran · 2025-08-09T17:16:24Z

fergalmoran commented

2025-08-09 17:16:24 +00:00

Originally created by @benhysell on 8/25/2017

I'm trying to copy the angular unit testing setup found in the angular template and re-implement it with Karma for the React/Redux example, and I'm not having a whole lot of luck.

Does anyone here have any guidance on how to get up and going? Googling for 'Typescript/React/Redux/Unit Test/Karma' doesn't really kick up enough to get past the initial setup phase.

I've added a 'test' folder with a boot-tests.ts

// There's no typing for the `__karma__` variable. Just declare it as any
declare var __karma__: any;
declare var require: NodeRequire;

// Prevent Karma from running prematurely
__karma__.loaded = function () { };


// Then we find all the tests
const context = require.context('../components', true, /\.spec\.ts$/);

// And load the modules
context.keys().map(context);

// Finally, start Karma to run the tests
__karma__.start();

I added a karma.confg.js

module.exports = function (config) {
    config.set({
        basePath: '.',
        frameworks: ['jasmine'],
        files: [
            '../../wwwroot/dist/vendor.js',
            './boot-tests.ts'
        ],
        preprocessors: {
            './boot-tests.ts': ['webpack']
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        mime: { 'application/javascript': ['ts','tsx'] },
        singleRun: false,
        webpack: require('../../webpack.config.js')().filter(config => config.target !== 'node'), // Test against client bundle, because tests run in a browser
        webpackMiddleware: { stats: 'errors-only' }
    });
};

I added the following to my package.json:

"devDependencies": {
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.54",
    "chai": "4.1.1",
    "jasmine-core": "2.8.0",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.4",
    "react-test-renderer": "15.6.1" 
  }

I'm at a bit of a loss on what to add for the Counter.spec.ts.

Any kick in the right direction would be greatly appreciated...

I realize this isn't exactly the right forum to post this type of question, but I assume a lot of .NET developers use these templates as a starting off spot to get their feet wet with React/Redux. It would be awesome to have this last little bit of help to get us our way.

*Originally created by @benhysell on 8/25/2017* I'm trying to copy the angular unit testing setup found in the angular template and re-implement it with Karma for the React/Redux example, and I'm not having a whole lot of luck. Does anyone here have any guidance on how to get up and going? Googling for 'Typescript/React/Redux/Unit Test/Karma' doesn't really kick up enough to get past the initial setup phase. 1. I've added a 'test' folder with a boot-tests.ts ``` // There's no typing for the `__karma__` variable. Just declare it as any declare var __karma__: any; declare var require: NodeRequire; // Prevent Karma from running prematurely __karma__.loaded = function () { }; // Then we find all the tests const context = require.context('../components', true, /\.spec\.ts$/); // And load the modules context.keys().map(context); // Finally, start Karma to run the tests __karma__.start(); ``` 2. I added a karma.confg.js ``` module.exports = function (config) { config.set({ basePath: '.', frameworks: ['jasmine'], files: [ '../../wwwroot/dist/vendor.js', './boot-tests.ts' ], preprocessors: { './boot-tests.ts': ['webpack'] }, reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], mime: { 'application/javascript': ['ts','tsx'] }, singleRun: false, webpack: require('../../webpack.config.js')().filter(config => config.target !== 'node'), // Test against client bundle, because tests run in a browser webpackMiddleware: { stats: 'errors-only' } }); }; ``` 3. I added the following to my package.json: ``` "devDependencies": { "@types/chai": "4.0.1", "@types/jasmine": "2.5.54", "chai": "4.1.1", "jasmine-core": "2.8.0", "karma": "1.7.0", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-webpack": "2.0.4", "react-test-renderer": "15.6.1" } ``` 4. I'm at a bit of a loss on what to add for the ```Counter.spec.ts```. Any kick in the right direction would be greatly appreciated... I realize this isn't exactly the right forum to post this type of question, but I assume a lot of .NET developers use these templates as a starting off spot to get their feet wet with React/Redux. It would be awesome to have this last little bit of help to get us our way.

fergalmoran closed this issue

2025-08-09 17:16:24 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#470