web-dev-qa-db-ja.com

ジェスト：テストするモジュール内に必要なモジュールが見つかりません（相対パス）

私はこのコンポーネントを持っています：

import React from 'react';
import VideoTag from './VideoTag';
import JWPlayer from './JWPlayer';

class VideoWrapper extends React.Component {
//... component code
}

いくつかのロジックに基づくと、内部に別のコンポーネント（VideoTagまたはJWPlayer）がレンダリングされますが、jestファイルでテストしようとすると、エラーが発生します。

モジュール './VideoTag'が見つかりません

3つのコンポーネントは同じディレクトリにあるため、トランスパイルしてブラウザで動作を確認すると実際に機能しますが、Jestがこれらの相対パスの解決に問題があるようです。これはjestファイルです。

jest.dontMock('../src/shared/components/Video/VideoWrapper.jsx');

import React from 'react';
import ReactDOM from 'react-dom';
TestUtils from 'react-addons-test-utils';

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

describe('VideoWrapper tests', () => {
  it('Render JWPlayer', () => {

      let vWrapper = TestUtils.renderIntoDocument(
      < VideoWrapper model={model} />
  );

  });
});

エラーは次の行にあります。

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

相対パスの処理方法をjestに指示するにはどうすればよいですか？

javascriptnode.jsunit-testingreactjsjestjs
10
ferflores

問題はパスではなく、.js拡張子を持つモジュールのみを探していました。jest構成に.jsxを追加した後に機能しました。

"moduleFileExtensions": [
  "js",
  "jsx"
]
10
ferflores

また、セットアップしたパスマップをテストで認識できるようにするために、tsconfigパスマップのjest構成にmoduleNameMapperを追加する必要がありました。このようなもの：

"moduleNameMapper": {
      "^yourPath/(.*)": "<rootDir>\\yourPath\\$1"
    }

うまくいけば、これは将来の誰かを助けるでしょう！

3
Justin

Jestはデフォルトのファイル拡張子として['js'、 'jsx'、 'json'、 'node']を使用するため、これら2つのオプションの構成にmoduleFileExtensionsを追加する必要はありません。 （特にオプションをスキップしたい場合を除きます）

1
Sahil Jain

TypeScriptでJestを使用しようとしてここで終わる他の人のために：あなたはtsにmoduleFileExtensionsを含める必要があります。例：

"moduleFileExtensions": [
  "js",
  "jsx",
  "json",
  "node",
  "ts"
]

*.tsファイルの変換も必要です。

transform: {
  "^.+\\.vue$": "vue-jest",
  "^.+\\.js$": "babel-jest",
  "^.+\\.(ts|tsx)$": "ts-jest"
},
0
Volker Rose