Typescript import failing in unit tests

I am developing a React app using TypeScript and I am currently merging unit tests with Mocha as a test runner. This has worked well enough so far, but I ended up at a roadblock where I can use either ...

import * as Tether from 'react-tether';

      

        
        
        
      

    

and my tests will build and run. However, building the app failed:

 "JSX element type 'Tether' does not have any construct or call signatures."

      

        
        
        
      

    

Alternatively, I use:

import Tether from 'react-tether';

      

        
        
        
      

    

Now the app builds and runs fine, but my tests fail with the error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

      

        
        
        
      

    

This means that the import is null. I checked react source and it uses default export, so I would think the second import style would be correct / preferred?

Some information on how the application and tests are created might be helpful:

The project build process uses Webpack with ts-loader first, and the second uses the loader. I left the JSX compilation for babel, so the tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "es6",
        "baseUrl": "app/",
        "typeRoots": [
            "./types"
        ],
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "jsx": "preserve",
        "allowJs": false,
        "moduleResolution": "node",
        "lib": [
            "dom", 
            "es7"
        ],
        "types": [
            "mocha",
            "chai"
        ]
    }
}

      

        
        
        
      

    

I am using the following script to run the tests:

TS_NODE_PROJECT=test.tsconfig.json NODE_PATH=app mocha --require build-scripts/test-dom --compilers ts:ts-node/register,tsx:ts-node/register"

      

        
        
        
      

    

This gives a ts-node to compile the files, but using a different tsconfig so the jsx is not saved. Test.tsconfig.json looks like this:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "baseUrl": "app/",
        "typeRoots": [
            "./types"
        ],
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "jsx": "react",
        "allowJs": false,
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es7"
        ],
        "types": [
            "mocha",
            "chai"
        ]
    }
}