reactjs - Eșecul importurilor TypeScript în testele unitare


Dezvolta o aplicație React folosind TypeScript și în prezent integrez teste unitare cu Mocha ca runner de teste. Până acum a funcționat destul de bine, dar am întâmpinat un obstacol unde pot folosi fie...

import * as Tether from 'react-tether';

și testele mele se vor construi și rula. Totuși, compilarea aplicației eșuează, cu;

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

Alternativ, eu folosesc:

import Tether from 'react-tether';

Acum aplicația se construiește și rulează bine, dar testele mele eșuează cu eroarea:

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

Ceea ce implică faptul că importul a produs null. Am verificat sursa react-tether și folosește un export implicit, așa că m-aș fi gândit că al doilea stil de import ar fi corect/preferat?

Unele informații despre modul în care aplicația și testele sunt construite ar putea fi utile:

Procesul de construire al proiectului folosește mai întâi Webpack cu ts-loader și apoi babel-loader. Am lăsat compilarea JSX pentru babel, așa că tsconfig.json este:

{
    "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"
        ]
    }
}

Pentru a rula teste folosesc următorul script:

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

Acest lucru face ca ts-node să compileze fișierele, dar folosind un tsconfig diferit astfel încât jsx să nu fie păstrat. Fișierul test.tsconfig.json arată astfel:

{
    "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"
        ]
    }
}