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 ソースを確認しましたが、デフォルトのエクスポートを使用しているため、2 番目のインポート スタイルが正しい/好ましいと思いましたか?

アプリとテストの作成方法に関する情報が役立つ場合があります。

プロジェクトのビルド プロセスでは、最初に ts-loader を使用し、次に babel-loader を使用して Webpack を使用します。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 がファイルをコンパイルしますが、jsx が保持されないように別の tsconfig を使用します。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