3

我正在使用 TypeScript 开发 React 应用程序，目前正在将单元测试与 Mocha 集成为测试运行程序。到目前为止，这工作得相当好，但我遇到了一个障碍，我可以使用任何一个......

import * as Tether from 'react-tether';

我的测试将构建并运行。但是，应用程序构建失败了；

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

或者，我使用：

import Tether from 'react-tether';

现在应用程序构建并运行良好，但我的测试失败并出现错误：

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

这意味着导入产生了 null。我已经检查了 react-tether 源，它使用的是默认导出，所以我认为第二种导入样式是正确的/首选的？

有关如何构建应用程序和测试的一些信息可能会有所帮助：

项目构建过程首先使用带有 ts-loader 的 Webpack，然后是 babel-loader。我把 JSX 编译留给了 babel，所以 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"
        ]
    }
}

对于运行测试，我使用以下脚本：

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

这让 ts-node 编译文件，但使用不同的 tsconfig 以便不保留 jsx。test.tsconfig.json 看起来像这样：

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

0 回答 0