web-dev-qa-db-ja.com

JestとReactおよびCSSファイルのインポートを伴うSyntaxError

React and Babel。）で最初のJestテストに合格しようとしています。

次のエラーが表示されます。

SyntaxError：/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less：予期しないトークン

    >  7 | @import '../variables.css';
          | ^

Jestのpackage.jsonの構成は次のようになります。

"babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

だから私は何が欠けていますか？

reactjsbabeljestjs
32
Mano Dupont

moduleNameMapperは、異なる拡張子を持つファイルを解釈する方法をJestに指示する設定です。 Lessファイルの処理方法を伝える必要があります。

プロジェクトで次のようなファイルを作成します（必要に応じて別の名前またはパスを使用できます）。

config/CSSStub.js

module.exports = {};

このスタブは、CSSまたはLessファイルの代わりに使用するようにJestに指示するモジュールです。次に、moduleNameMapper設定を変更し、この行をオブジェクトに追加して使用します。

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

Jestは、空のオブジェクトをエクスポートするモジュールとしてCSSまたはLessファイルを扱います。他のこともできます。たとえば、CSSモジュールを使用する場合は、プロキシを使用して、インポートするたびにインポートしたプロパティ名を返すことができます。

詳細はこちらをご覧ください ガイド 。

49
Dan Abramov

Package.jsonファイルのjest設定でmoduleNameMapperキーを使用してこれを解決しました

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

この後、以下で説明するように2つのファイルを作成する必要があります。

  • __mocks__/styleMock.js

    module.exports = {};

  • __mocks__/fileMock.js

    module.exports = 'test-file-stub';

CSSモジュールを使用している場合は、プロキシを模倣してclassNameルックアップを有効にすることをお勧めします。したがって、構成は次のように変更されます。

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

ただし、identity-obj-proxyパッケージをdev依存関係としてインストールする必要があります。

yarn add identity-obj-proxy -D

詳細については。 jest docs を参照できます

15
Jjagwe Dennis

2018年2月のcreate-react-appを使用するUPDATE。パッケージ内のmoduleNameMapperをオーバーライドすることはできません。 jsonですが、jest.config.jsで動作しますが、残念ながら、この理由についてのドキュメントは見つかりませんでした。したがって、私のjest.config.jsは次のようになります。

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

また、scssファイルと@importを非常にうまくスキップします。

私の答えを支持しました jest webpack

3
AlexNikonov

同様の状況で、identity-object-proxyをインストールし、それをCSSのjest configに追加することでうまくいきました。

//jest.config.js

module.exports = {
  moduleNameMapper: {
    "\\.(css|sass)$": "identity-obj-proxy",
  },
};

私が見ていた特定のエラー：

Jest encountered an unexpected token

/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
                                                                                         ^

SyntaxError: Unexpected token .

  1 | import React from 'react';
> 2 | import styles from './styles.css';
0
Jadam

次をpackage.jsonに追加すると、この問題は解決しました。

"jest": {
    "moduleNameMapper": {
        ".+\\.(css|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
}

そしてもちろん、yarn add -D jest-transform-stubを実行する必要があります

0
ettanany