Jest 및 React에서의 SyntaxError 및 CSS 파일 Import

Jest 및 React에서의 SyntaxError 및 CSS 파일 Import

나는 리액트 앤 바벨과 함께 나의 첫 번째 재스트 테스트를 통과하기 위해 노력하고 있다.

다음의 에러가 표시됩니다.

구문 오류: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton.less: 예기치 않은 토큰

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

제 소포요.jese의 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"
    ]
  },

내가 뭘 놓쳤지?

moduleNameMapper확장자가 다른 파일을 해석하는 방법을 제스트에게 지시하는 설정입니다.파일 수를 줄이는 방법을 알려줘야 합니다.

프로젝트에 다음과 같은 파일을 만듭니다(원하는 경우 다른 이름 또는 경로를 사용할 수 있습니다).

config/CSSStub.js

module.exports = {};

이 스터브는 CSS 또는 Less 파일 대신 Jest에게 사용하도록 지시하는 모듈입니다.그럼 바꿉니다.moduleNameMapper이 행을 오브젝트에 추가하여 사용합니다.

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

이제 Jest는 CSS 또는 Less 파일을 빈 객체를 내보내는 모듈로 취급합니다.다른 작업도 수행할 수 있습니다.예를 들어 CSS 모듈을 사용하는 경우 프록시를 사용하여 Import할 때마다 Import한 속성 이름을 반환할 수 있습니다.

자세한 것은, 이 메뉴얼을 참조해 주세요.

이 문제를 해결하려면moduleNameMapper패키지 내의 joke Configuration에 키를 누릅니다.json 파일

{
   "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 dependency)으로 패키지화.

yarn add identity-obj-proxy -D

자세한 정보는.농담 문서를 참조할 수 있습니다.

2018년 2월부터 create-react-app을 사용하는 UPDATE.패키지의 moduleNameMapper는 덮어쓸 수 없습니다.json 하지만 jeast.config.discl에서는 동작합니다.불행하게도 왜 동작하는지에 대한 문서를 찾을 수 없었습니다.그래서 제 joke.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는 잘 건너뜁니다.

내 대답을 뒷받침하며 나는 농담 웹 팩을 따라갔다.

비슷한 상황에서 identity-object-proxy를 설치하고 이를 CSS용 joke Configuration에 추가하는 것이 효과적이었습니다.

//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';

ts-jest를 사용하는 경우 위의 솔루션 중 어느 것도 작동하지 않습니다.변혁을 모의해야 합니다.

jest.config.displays

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  roots: [
    "<rootDir>/src"
  ],
  transform: {
    ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
    '.(css|less)$': '<rootDir>/jest-config/style-mock.js'
  },
};

file-module.module

module.exports = {
  process() {
    return `module.exports = 'test-file-stub'`;
  },
};

style-param.displaces.displaces

module.exports = {
    process() {
      return 'module.exports = {};';
    }
  };

자세한 내용을 원하시면 이 작업 예를 찾아주세요.

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

패키지 설치:

npm i --save-dev identity-obj-proxy

jeast.config.js를 추가합니다.

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

업데이트: 2021년 8월 TypeScript와 함께 Next JS를 사용하는 경우.예시를 따르기만 하면 됩니다.

그렇지 않으면 환경을 구성하는 데 며칠이 낭비됩니다.

https://github.com/vercel/next.js/tree/canary/examples/with-jest

패키지 하단에 moduleNameMapper를 추가했습니다.json에서는 다음과 같이 농담을 설정합니다.

"jest": {
    "verbose": true,
    "moduleNameMapper": {
        "\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
    }
}

언급URL : https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files