jestが.cssを解析しようとしています

Question

私は何をしても、CSSファイルをjavascriptとして解析しようとしています。

ファイルはwebpackで正しく構築されます。

私は冗談

"jest": { 
    "rootDir": "./src", 
    "moduleNameMapper": { 
     "^.*[.](css|CSS)$": "../jest/styleMock.js" 
    } 
    }, 

ため、以下の構成を持っている私はまた、輸入品からCSSを除去するためのスクリプトプリプロセッサを試してみました：

"jest": { 
    "rootDir": "./src", 
    "scriptPreprocessor": "../node_modules/jest-css-modules" 
    }, 

それがエラーを投げ続けます。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { 
                          ^
    SyntaxError: Unexpected token . 

Answer 1

babel CLIを試しましたか？たぶん、あなたのコードは、形質転換されていない

私のプリプロセッサでは、私は自分のコードを変換するbabel-core->utilsからbabel-coreとcanCompile機能を使用しても.jsファイル以外のファイルを無視し、.ES、.jsxのなど

var babel = require('babel-core'); 
var canCompile = babel.util.canCompile 

module.exports = { 
    process: function (src, filename) { 
    if (!canCompile(filename)) { 
     return ''; //ignore this file 
    } 

そのため、あなたはSyntaxError（babel.transform）ですか？冗談でcustom preprocessorも見てください。

Answer 2

あなたのJest設定でmoduleNameMapper行をdescribed in the Jest docsとして使用することをお勧めします。 package.jsonで

最小限の「CSSを無視する」冗談の設定は、この

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

その後styleMock.jsはちょうどこの

module.exports = {};