私はこのTypeScript + React + Webpack + Jest + Enzymeを完全に機能させています。
テスト仕様でグローバル関数にアクセスできるようにする必要があると感じています。setupTestFrameworkScriptFileJest構成のオプションを.jsファイルにポイントすることでそれを行うことができ、次のようなものがあります。
const Enzyme = require("enzyme");
const React = require("react");
const getMuiTheme = require("material-ui/styles/getMuiTheme").default;
global.mountWithContext = (node) => {
return Enzyme.mount(node, {
context: {
muiTheme: getMuiTheme()
},
childContextTypes: {
muiTheme: React.PropTypes.object
}
});
};
私のスペックファイルでは呼び出すmountWithContext()ことができ、テストを実行すると問題なく動作します。しかし、私のエディターはその機能を認識しません。
これを回避するために、次の/typings/declarations.d.tsファイルを作成しました。
declare function mountWithContext(node: any): any;
今私のスペックファイルはmountWithContext関数を認識しますが、タイプは「間違っています」。正しい定義は次のようになります。
declare function mountWithContext(node: React.ReactElement<any>): Enzyme.ReactWrapper<P, S>;
React.ReactElementので、正しく識別され@types/react/index.d.tsたファイルには、これを含まれています：
export = React;
export as namespace React;
同じことは酵素には当てはまりません。グローバルにEnzymeエクスポートされたものはありません。@types/enzyme/index.d.tsこのようなものを見ると：
export interface ReactWrapper<P, S> extends CommonWrapper<P, S> {
(...)
}
しかし、私がこれを行ったとしても：
declare function mountWithContext(node: React.ReactElement<any>): ReactWrapper<P, S>;
動作しません。ReactWrapperまだ認識されていません。
このdeclarations.d.tsファイル内にインポートしようとすると、型を正しく使用できるようになりますが、関数宣言がスペックファイルで認識されなくなります。また、次のようなトリプルスラッシュディレクティブを追加しようとしました。
/// <reference path="../node_modules/@types/enzyme/index.d.ts" />
そして、ファイルは認識されますが、ReactWrapperタイプはまだ認識されていません。
だから...次のようにmountWithContext、すべての適切な型を使用して、カスタムグローバル関数のTypeScript関数宣言を作成するにはどうすればよいですか？
declare function mountWithContext(node: React.ReactElement<any>): ReactWrapper<P, S>;
global.mountWithContext関数が存在し、指定されたタイプであることを宣言したい場合は、プロジェクトの空の宣言ファイルに以下を追加できます。
import React from 'react';
import enzyme from 'enzyme';
declare global {
namespace NodeJS {
interface Global {
mountWithContext<P, S>(node: React.ReactElement<any>): enzyme.ReactWrapper<P, S>;
}
}
}
詳細
上記の各構成の内訳は次のとおりです。
declare globalブロック：この構築物の目的は、あなたがする場合は補強するために、修正することで、グローバルスコープ、いずれかの新しい宣言を導入することにより、またはから、既存のものを変更することによって、内このようなモジュールとして非グローバルな文脈。宣言ファイルは、Enzymeからimportインポートするトップレベルの句が含まれているため、モジュールですReactWrapper。このようなブロックは「グローバル拡張」と呼ばれ、実装ファイルにも表示される場合があります。
構造化のinterface Globalラップnamespace NodeJS：テストでは、ノード環境によって提供されるmountWithContext、偶然に名前が付けられたグローバル変数のメンバーとして関数にアクセスしていglobalます。この変数は、などの他の環境グローバルと同じレベルのノードの型宣言によってすでに宣言されていprocessます。ただし、新しいメンバーを追加して、そのタイプを拡張する必要があります。このグローバルのタイプglobalは、Nodeの公式宣言によって、interface Global内ですでに宣言されていnamespace NodeJSます。これは、の新しいメンバーを宣言することで実現しinterface Globalます。私たちの増強は、namespace収容物で包む必要があります。さもGlobalないと、別のものと見なされます。interface。大まかに言えば、字句スコープが適用されます。（TypeScriptインターフェイスは同じスコープ内で複数回宣言でき、これらの宣言はマージされることを思い出してください）
ノート
この宣言はどこに配置しますか？TypeScriptがそれを取得し、コンパイルコンテキストに含める原因となる場所。慣例により、プロジェクトのルートディレクトリにあるglobals.d.tsという名前のファイルに配置します。（技術的には、別の名前を付けて、下位のディレクトリに移動することができます）。
この宣言ファイルはアプリケーションコードの一部であり、ソース管理にチェックインする必要があることに注意することが重要です。types、node_modules / @ types、jspm_packages / npm / @typesなどのディレクトリでサードパーティの宣言と一緒に配置しないでください。
この増加は、活字体ファイル（影響を与えることも注意することが重要である.ts、.tsx、.d.ts）だけを。私たちは、むしろで作業するときにインテリセンス、単に提供するために、活字体の言語サービスによってピックアップされるように、この関数を宣言していた場合.jsや.jsx,、ファイル、このアプローチは動作しません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加