Unexpected reserved word error while testing using wallaby

Question

In my test file where I have written test cases, I have imported a typescript file like below:

import {rootReducer} from "../src/reducers/rootReducer";

In rootReducer.ts I have imported another typescript file like below:

import taskReducer from "./taskReducer.ts";

Then it shows the error:

SyntaxError: Unexpected reserved word
at src/reducers/rootReducer.ts:7

Both rootReducer.ts and taskReducer.ts come under folder /src/reducers

No failing tests if you remove '.ts' from import statement, but throws error in browser. The app won't run then

The wallaby configuration is as below:

module.exports = function (wallaby) {

    return {
        files: [
            'src/*.ts',
            'src/**/*.ts'
        ],

        tests: [
            'test/*Test.ts'
        ],

        testFramework: "mocha",

        env: {
            type: 'node'
        },

        compilers: {
            '**/*.ts': wallaby.compilers.typeScript({
                /* 1 for CommonJs*/
                module: 1
            })
        }
    }
};

Answer 1

Your statement:

import taskReducer from "./taskReducer.ts";

Should either be:

// Import just taskReducer from this module
import {taskReducer} from "./taskReducer";

Or:

// Import the whole module and call it taskReducer
import * as taskReducer from "./taskReducer";

Answer 2

The issue is not in wallaby.js, but in your webpack config. To enable requiring files without specifying the extension, you must add a resolve.extensions parameter specifying which files webpack searches for:

// webpack.config.js
module.exports = {
  ...
  resolve: {
    // you can now require('file') instead of require('file.ts')
    extensions: ['', '.js', '.ts', '.tsx'] 
  }
};