Question

我正在使用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节点编译文件，但使用不同的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"
        ]
    }
}

在单元测试中导入失败的Typescript

0 个答案: