웹 팩의 css로 인해 Mocha 테스트에 실패했습니다.

웹 팩의 css로 인해 Mocha 테스트에 실패했습니다.

저는 Mocha에 처음 와서 간단한 React 컴포넌트를 테스트하기 위해 사용하려고 합니다.리액트 컴포넌트에 CSS 스타일링이 없고 React 컴포넌트 내의 태그에 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.tempx

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 | }

인터넷으로 검색해 봤는데 아직까지는 잘 안 나왔어요.내가 뭘 빼놓았나요?저를 도와주시거나 올바른 방향을 알려주시면 감사하겠습니다.현재 사용하고 있는 것:
노드 익스프레스 서버
반응
리액트 라우터
웹 팩
바벨
모카
차이
시논
시논차이

이 있습니다.babel/register스타일 가져오기를 무시하려면 스타일 후크:

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

인스톨:

npm install --save-dev ignore-styles

스타일 없이 테스트 실행:

mocha --require ignore-styles

css 컴파일러를 사용하여 mocha를 실행할 수 있습니다.컴파일러 js는 다음과 같습니다.

css-dnt-interval.syslog.design

function donothing() {
  return null;
}

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

mocha 명령어를 다음과 같이 실행합니다.

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

여기와 같은 대답입니다. 제가 바벨6를 작업하기 위해 사용했던 것입니다.

패키지.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를 사용하여 원하는 수만큼 확장자를 추가할 수 있습니다.

웹 팩을 사용 중이므로 null-loader를 사용하여 로드합니다.null웹 팩이 컴포넌트에서 필수 CSS/LESS/SASS/etc 파일을 발견한 경우npm 경유로 인스톨 하고 나서, 로더를 포함하도록 Web 팩 설정을 갱신합니다.

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

이 경우 실제 어플리케이션에 CSS를 로드할 수 없기 때문에 이 로더를 사용하는 테스트번들용으로 별도의 웹 팩 설정을 할 필요가 있습니다.

이 문제에 대한 대처법을 찾고 있는 분들을 위해jest스타일 파일의 핸들러를 추가하기만 하면 됩니다.

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

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

여기 더 있어요.

mocha-web-pack을 사용하고 있기 때문에 이 솔루션들 중 어느 것도 효과가 없었습니다.또, 「--compiler」스위치는 사용할 수 없습니다.가장 인기 있는 답변에서 설명한 대로 ignore-styles 패키지를 구현했지만, 이스탄불의 커버리지 리포트(.less files)에 차이가 없어 활성화되지 않은 것 같았다.

문제는 webpack.config.test.js 파일에서 사용하던 .less 로더입니다.로더를 늘로더로 바꾸기만 하면 문제가 해결됩니다.

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

이 솔루션은 가장 심플한 솔루션이며 패키지를 변경하거나 추가할 필요 없이 테스트 구성을 직접 대상으로 합니다.json 스크립트 또는 그보다 더 나쁜 스크립트는 새로운 .disc 파일을 추가합니다.

한 가지 간단한 방법은 '무시 스타일'을 가져오는 것입니다. 테스트 수업에서..

다음 코드는 의존하지 않고 작동합니다.테스트의 맨 위에 추가해 주세요.

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};

매우 오래되었지만 이 질문은 여전히 관련이 있으므로 다른 해결책을 제시하겠습니다.

후크를 추가할 패키지인 해적 사용require() - 바벨을 쓰면 됩니다.

코드 예:

// .test-init.js
const { addHook } = require('pirates');

const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];

addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });

를 모카라고 됩니다.mocha --require .test-init.js [whatever other parameters you use]

이것은 직설적이고 우아하며 무시 스타일과 달리 스타일만 무시하는 것은 아닙니다.또한 모듈 전체를 조롱하는 것과 같은 속임수를 테스트에 더 적용해야 할 경우 쉽게 확장할 수 있습니다.

언급URL : https://stackoverflow.com/questions/32236443/mocha-testing-failed-due-to-css-in-webpack