Jest: Jest는 CSS를 가져오는 JSX에서 작동하지 않습니다.

@svipben https://facebook.github.io/jest/docs/webpack.html#mocking -css-modules

@maximderbin 감사합니다!

@maximderbin 감사합니다! moduleNameMapper 를 추가하여 내 문제를 해결합니다.

@svipben @maximderbin @simonxl 이 moduleNameMapper를 어디에 추가해야 하나요?
나는 문서에서 우리가 그것을 packag.json에 추가할 것이지만 어느 것을 볼 것인가?
tnx

@sarahmarciano moduleNameMapper 는 구성의 일부입니다. 기본적으로 다음과 같이 "jest" 키 아래의 package.json(종속성에서 jest 기능이 있는 것)의 구성을 설정할 수 있습니다.

{
  "dependencies": {...}
  "jest": {
    "moduleNameMapper": {...}
  }
}

package.json 파일의 jest 구성에서 moduleNameMapper 키를 사용하여 이 문제를 해결했습니다.

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

그런 다음 아래 설명된 대로 두 개의 파일을 만들어야 합니다.

• __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 패키지를 설치해야 합니다.

yarn add identity-obj-proxy -D

자세한 내용은. jest 문서 를 참조할 수 있습니다.

여기서 권장하는 접근 방식은 CSS 모듈이 JSX 파일이 의존하는 값을 내보내는 경우 작동하지 않습니다. 대부분의 가이드는 클래스 이름을 내보내는 데 CSS 모듈만 사용한다고 가정합니다. CSS 모듈을 제대로 조롱하기 위한 가이드가 있었으면 합니다.

@matthew-dean "CSS 모듈을 적절하게 조롱"한다는 것은 무엇을 의미합니까? 사용 사례를 조금 더 설명할 수 있습니까? identity-obj-proxy 를 사용한 경험이 있습니다.

:export {
  sizeMobile: $size-mobile / 1px;
  sizePhablet: $size-phablet / 1px;
  sizeSmallTablet: $size-small-tablet / 1px;
  sizeTablet: $size-tablet / 1px;
  sizeDesktop: $size-desktop / 1px;
  sizeLargeDesktop: $size-large-desktop / 1px;
}

import styles from './variables.scss'

const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
  return <Tile style={{width: tileSize}} />
}

이것은 CSS 모듈과 JS 간에 상수(값)를 공유할 수 있고 값을 기반으로 조건부 렌더링 또는 동적 props를 할당할 수 있음을 보여주는 인위적인 예입니다.

그러나 identity-obj-proxy 를 사용하면 존재하는 실제 값은 고사하고 이러한 값을 정수로 변환할 수 없습니다. 따라서 CSS 모듈에 정의된 상수에 의존하는 JSX 코드가 있는 경우 CSS 모듈을 적절하게 조롱하지 않고는 이를 테스트할 수 없습니다(값이 테스트 가능한 정수로 반환된 객체를 가짐). identity-obj-proxy 는 CSS 모듈에 범위가 지정된 CSS 클래스 이름만 있는 객체가 포함되어 있다고 가정합니다. 그것은 JS 작업에서 차례로 사용되는 값/상수를 내보내는 기능인 CSS 모듈의 다른 측면을 지원하지 않습니다.

@SimenB

덧붙여서, 나는 다음과 같이 CSS 모듈을 성공적으로 조롱할 수 있었습니다.

const styles = require('styles/variables.scss')

jest.mock('styles/variables.scss', () => {
  return {
    sizePhablet: 500,
    sizeSmallTablet: 768,
    sizeTablet: 1024,
    sizeDesktop: 1440,
    sizeLargeDesktop: 1920
  }
})

CSS 모듈의 모든 기능을 사용하고 있고 나처럼 기본 " identity-obj-proxy 사용" 조언을 무시하고 있던 다른 누군가에게 이것이 유용하기를 바랍니다.

'jest-transform-css'를 사용하여 이 문제를 해결했습니다.
설치 후 jest config.xml에 아래를 추가했습니다.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

이제 css 파일은 js 파일과 마찬가지로 트랜스파일됩니다.

@matthew-dean 모의 CSS 모듈을 어디에서 작성했으며 jest에 어떻게 참조합니까?

외부 패키지를 사용하고 있으며 다음을 사용하여 자체 파일을 단일 파일로 가져옵니다.
<strong i="6">@import</strong> "progress-tracker/progress-tracker-variables.scss";

테스트를 시작하기 위해 Jest를 실행할 때마다

위의 오류가 나타납니다. 나는 이미 package.json 안에 css 모형을 지정했습니다.

해당 문제에 대해 도움을 받기를 고대하고 있습니다. 어떤 트릭, 제안?

편집: babel-jest 및 identity-obj-proxy 패키지를 모두 시도했지만 그 중 아무 것도 작동하지 않았습니다. 문제는 여전히 지속됩니다.

편집 2: 또한 웹에서 본 솔루션에 따라 아래 구성을 시도했습니다.

나는 Babel 7 , babel-jest ^24.5.0 , Jest ^24.1.0 를 사용하고 있습니다.

위의 조언을 따른 후에도 대상 파일(예: Post.test.js import Post.js ) CSS 파일을 가져옵니다(예: ./postStyles.css .

Jest encountered an unexpected token

SyntaxError: Unexpected token .

Details:

    /Users/ben/Desktop/Work/code/bengrunfeld/src/front-end/components/Post/postStyles.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.post h1, .post h2, .post h3 {

      3 |
      4 | import { PostText } from './styles'
    > 5 | import './postStyles.css'

위에 링크된 기사에 따르면 이것은 package.json 에 있습니다.

"jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

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

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },

루트 디렉토리에는 다음 코드가 있는 __mocks__/styleMock.js 가 있습니다.

module.exports = {};

마지막으로 내 jest.config.js :

module.exports = {
  setupFiles: ['<rootDir>/src/test/setup.js']
}

차례로 Enzyme을 구성합니다.

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

내 scs 파일에 @import 문이 포함된 거의 동일한 문제를 해결하기 위해 고군분투하고 있습니다. SyntaxError: 유효하지 않거나 예기치 않은 토큰을 알려주는 테스트에 실패했습니다. 누군가 나를 도와줄 수 있습니까?

위에 제공된 솔루션을 따랐지만 그 중 어느 것도 나를 위해 작동하지 않는 것 같습니다.

@babel/polyfill 를 개발 종속성으로 추가하여 이 문제를 해결할 수 있었습니다.

@fthomas82도 마찬가지

package.json 파일의 jest 구성에서 moduleNameMapper 키를 사용하여 이 문제를 해결했습니다.

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

그런 다음 아래 설명된 대로 두 개의 파일을 만들어야 합니다.

• __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 패키지를 설치해야 합니다.

yarn add identity-obj-proxy -D

자세한 내용은. jest 문서 를 참조할 수 있습니다.

그것은 나를 위해 일했습니다. 감사 해요!!!

'jest-transform-css'를 사용하여 이 문제를 해결했습니다.
설치 후 jest config.xml에 아래를 추가했습니다.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

이제 css 파일은 js 파일과 마찬가지로 트랜스파일됩니다.

고마워, 형 @krajasekhar
그것은 나를 위해 작동합니다 👍

나는 packages.json 에 제안된 구성을 추가했지만 성공하지 못했습니다. 그런 다음 제 프로젝트 루트 디렉토리에 jest.config.js 가 있다는 것을 깨달았습니다. Jest는 packages.json 이상의 구성 파일을 사용합니다.

참고로 여기 내 jest.config.js 파일이 있습니다.

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

내 코드에서 원시 CSS를 가져와야 합니다.

import "./cloud.css?raw"

나는 또한 jest 구성을 수정했다.
"jest":{ "moduleNameMapper": { "\\.(css|less|scss|sass|css?raw)$": "identity-obj-proxy" },

그래도 가져오기 라인에서 테스트 오류가 발생합니다. 원시 가져오기를 조롱하는 방법에 대한 아이디어가 있습니까?

@import 예기치 않은 토큰의 솔루션=:)

패키지 설치:
npm i --save-dev identity-obj-proxy

jest.config.js에 추가

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

누군가 여기에 도착하면:
이 모듈은 내가 본 것 중 가장 업데이트되었습니다: https://www.npmjs.com/package/jest-css-modules-transform

transform: { '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest', ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform" }, transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$', ], moduleNameMapper: { '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy' },

나는 packages.json 에 제안된 구성을 추가했지만 성공하지 못했습니다. 그런 다음 제 프로젝트 루트 디렉토리에 jest.config.js 가 있다는 것을 깨달았습니다. Jest는 packages.json 이상의 구성 파일을 사용합니다.

참고로 여기 내 jest.config.js 파일이 있습니다.

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

솔루션을 제시한 모든 사람과 특별히 @Shadoow에게 감사드립니다! 일종의 논리였으나... config 파일이 package.json의 설정보다 우선 사용된다는 점을 놓치고 있었습니다.

요컨대, 새로 온 사람들에게 저에게 효과가 있었던 것은 커뮤니티 드림 팀이 제시한 여러 솔루션의 조합이었습니다.

1) jest.config.json 파일 생성

touch jest.config.json open jest.config.json

2) jest-transform-css를 설치합니다.

yarn add jest-transform-css -D

3) jest 구성 파일은 다음과 같아야 합니다.

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': './jest.mock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/assets/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(css|less|scss|sass)$': 'jest-transform-css',
  },
};

4) package.json을 업데이트하십시오(먼저 모든 JEST 구성이 있는 경우 새 jest 구성 파일로 전송). 그러면 마법이 여기에 적용됩니다.

"test": "jest --config ./jest.config.js"

Tks 모두!