1. ホーム
  2. reactjs

[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"

2022-02-11 16:27:51

質問

私は今、コードをテストするためにreact JESTを使っています。コンポーネントが単一で、他に何もインポートしていない場合、"npm test"はスムーズに実行されます。そして今、私は複数のコンポーネントを一緒にテストしたいと思っていますが、私はすぐにこのエラーを得ました。

SyntaxError: Unexpected token .

reactが他のものをインポートしているときはいつもこんな感じだったような。

require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );

で、jest を使用すると、予期しないトークン "." エラーがスローされます。

私の設定に何か間違いがあるはずですが、どこでしょうか?私のPackage.jsonには

 "jest": {
   "unmockedModulePathPatterns": [
     "<rootDir>/node_modules/react/",
     "<rootDir>/node_modules/react-dom/",
     "<rootDir>/node_modules/react-addons-test-utils/"
   ]
 }

そして、.babelrcはすでにルートにあります。また、babel-jestも含まれています。 ありがとうございます。

解決方法は?

のjestドキュメントをご覧ください。 ウェブパック統合 . 問題は、jestはjs以外のものを扱うことができないことです。そのため、インポートする全てのnone jsファイルをモック化する必要があります。最も簡単な方法は moduleNameMapper をjestの設定に追加してください。

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

を持つ __mocks__/styleMock.js というように見える。

module.exports = {};