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