React/Redux Karma Unit Testing Example

[benhysell]

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.

[rosieks]

If you want to write just Unit Test then you can look at my jest pull request - #1041

[benhysell]

Added an example repo - https://github.com/benhysell/spa

@rosieks , I saw your example...I was trying to follow the angular example as close as possible and use Karma. My hope is to get parity between the two, and then submit a pull request to update the React/Redux example for others here.

[SteveSandersonMS]

Thanks for the answers @rosieks and @benhysell.

My hope is to get parity between the two, and then submit a pull request to update the React/Redux example for others here.

Please bear in mind that the Angular template is using Karma to implement browser automation testing. If there was to be parity, then the React/Redux template would also be doing browser automation, not just Jest unit tests.

[benhysell]

Can I ask, why not leave this open as a 'thing to do' for the project?