摩卡測試失敗，由於在webpack中的css

Question

我是摩卡新手，我試圖用它來測試一個簡單的React組件。如果反應組件沒有任何CSS樣式，但會拋出一個語法錯誤的測試會通過，如果內做出反應成分標籤中包含任何的className：

Testing.react.js

import React from 'react'; 

export default class Testing extends React.Component { 
    render() { 
    return (
     <section> 
     <form> 
      <input type="text" /> 
     </form> 
     </section> 
    ); 
    } 
} 

testing.jsx

import { 
    React, 
    sinon, 
    assert, 
    expect, 
    TestUtils 
} from '../../test_helper'; 

import TestingSample from '../../../app/components/Testing.react.js'; 

describe('TestingSample component', function(){ 
    before('render and locate element', function(){ 
     var renderedComponent = TestUtils.renderIntoDocument(
      <TestingSample /> 
     ); 

     var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
      renderedComponent, 'input' 
     ); 

     this.inputElement = inputComponent.getDOMNode(); 
    }); 

    it('<input> should be of type "text"', function() { 
     assert(this.inputElement.getAttribute('type') === 'text'); 
    }); 
}) 

測試將通過：

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx 


    TestSample component 
    ✓ <input> should be of type "text" 


    1 passing (44ms) 

我加入後的className輸入標籤的內部錯誤顯示出來：

import React from 'react'; 
import testingStyle from '../../scss/components/landing/testing.scss'; 

export default class Testing extends React.Component { 
    render() { 
    return (
     <section> 
     <form> 
      <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />  
     </form> 
     </section> 
    ); 
    } 
} 

測試結果：

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0) 
> 1 | .color { 
    |^
    2 | color: red; 
    3 | } 

我在網上搜索，但至今沒有運氣。我錯過了什麼嗎？請幫助我或指出我正確的方向將不勝感激。 我目前使用：
節點Express服務器
陣營
陣營路由器
的WebPack
通天
摩卡
柴
興農
興農柴

Answer 1

有一個babel/register風格鉤忽略樣式進口：

https://www.npmjs.com/package/ignore-styles

安裝：

npm install --save-dev ignore-styles

次

運行測試，沒有風格：

mocha --require ignore-styles

Answer 2

由於您使用的WebPack ，當webpack在組件中遇到所需的CSS/LESS/SASS/etc文件時，使用null-loader加載null。通過NPM安裝，然後更新您的WebPack配置包括裝載機：

{ 
    test: /(\.css|\.less|.\scss)$/, 
    loader: 'null-loader' 
} 

顯然，這將阻止您加載CSS在實際的應用程序，所以你會希望有一個單獨的WebPack配置爲您的測試捆綁使用這個裝載機。

Answer 3

可以使用運行摩卡一個CSS的編譯器，編譯器JS如下：

CSS-DNT-編譯器。JS

function donothing() { 
    return null; 
} 

require.extensions['.css'] = donothing; 
require.extensions['.less'] = donothing; 
require.extensions['.scss'] = donothing; 
// ..etc 

像這樣運行摩卡命令：

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive 

Answer 4

My same answer as here，這是我用來獲取工作巴貝爾6

的package.json

"scripts": { 
    "test": "mocha --compilers js:babel-core/register 
      --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'", 

工具/ testHelper.js

// Prevent mocha from interpreting CSS @import files 
function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 

這使您可以在您的組件旁邊的src文件夾中進行測試。您可以使用require.extensions添加儘可能多的擴展名。

Answer 5

這些解決方案都不適用於我，因爲我使用mocha-webpack，並且它不接受「--compilers」開關。正如最受歡迎的答案中所述，我實現了ignore-styles包，但它似乎是惰性的，在我的伊斯坦布爾報道報告中沒有任何區別（.less文件仍在測試中）。

問題是我在webpack.config.test.js文件中使用的.less加載器。簡單地交換較少加載器爲null-loader解決了我的問題。

module: { 
    rules: [ 
     { 
      test: /\.less$/, 
      use: ['null-loader'] 
     } 
    ] 
} 

對於我來說，這是迄今爲止最簡單的解決方案，並直接針對我的測試配置，而不必修改/添加到的package.json腳本，或者更糟，添加新的.js文件。

Answer 6

一個簡單的方法是導入'ignore-styles';在你的測試類..

Answer 7

對於那些希望如何在jest處理這一點 - 你只需要添加一個處理程序樣式文件：

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

// __mocks__/styleMock.js 
module.exports = {}; 

更多here。