Jest: .png의 "구문 오류: 유효하지 않거나 예기치 않은 토큰"

http://facebook.github.io/jest/docs/tutorial-webpack.html#content 를 확인하세요.

편집: 새 링크는 https://jestjs.io/docs/en/webpack 입니다.

@matheusml 이거 전혀 해결하셨나요? @cpojer 저도 이 문제가 있음을 확인할 수 있습니다. 소스 외부에 정적 자산이 있습니다. 즉 내 디렉토리 구조는 다음과 같습니다.

|-fonts
|-img
\_styles
src
|-components
|-pages
...

내 jest 구성은 링크에 제공된 예제와 유사합니다.

"jest": {
    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
    }
  }

이미지를 가져오려고 하면 테스트가 실패합니다.

import thumbnail from 'img/thumbnail.png'

public 디렉토리를 moduleDirectories 에 포함하지 않으면 Cannot find module 'img/thumbnail.png' from 'MyModule.js' 오류가 발생합니다.

예상되는 일입니까? 모듈 매핑이 이미 설정되어 있지만 가져오기 이벤트의 존재를 실제로 검증해야 합니까? 그렇지 않으면 위와 같은 오류가 발생합니다. 이름 매퍼에서 다른 유형의 가져오기를 시도하지 않았습니다.

나는 같은 문제에 직면하고 있으며 reactjs 서버 렌더링을 구현하려고합니다. 이에 대한 모든 수정 사항.

나는 이것을 내 babelrc에 넣었고 모든 것이 작동하는 것 같습니다.

{
"사전 설정": ["es2015", "반응"]
}

같은 유형 오류

SyntaxError: Unexpected token <
      /media/sibin/F_WORK/<path>/<icon-name>.svg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                               ^
      SyntaxError: Unexpected token <

저도 이 문제를 겪고 있는 것 같습니다. png가 필요할 때만 발생합니다.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

같은 오류도 마찬가지입니다. 누군가 고쳐주나요?

.mp3와 동일한 오류가 발생합니다. 아무 것도 도움이 되지 않습니다.

이와 같은 오류는 예를 들어 모듈 이름 매퍼에 절대 경로가 설정된 사전 설정을 사용한 결과일 수도 있습니다. 그러나 이 경우는 다음 릴리스에서 수정됩니다.

나는 같은 오류가 있었고 assetsTransformer.js 를 만들어 해결했습니다.

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

그런 다음 package.json의 jest 구성에 다음을 추가합니다.
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js", "\\.(css|less)$": "<rootDir>/assetsTransformer.js" } },

출처: https://facebook.github.io/jest/docs/webpack.html#content

제 경우에는 <rootDir> 가 Jest에서 제공한 토큰 이라는 것을 깨닫지 못하고 교체해야 하는 토큰이라고 생각했습니다. moduleNameMapper 항목에 추가하면 문제가 해결되었습니다.

@bombellos가 언급한 assetTransformer.js 를 추가했습니다. 또한 웹팩과 함께 사용 에 대한 지침을 따랐습니다. 하지만 여전히 같은 오류가 발생합니다.

PNG:

 FAIL  components/__tests__/List.js
  ● Test suite failed to run

    /assets/images/logo-header.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (components/PageHeader.js:15:19)
      at Object.<anonymous> (components/Main.js:10:436)

SVG:

 FAIL  ui/Button/__tests__/snapshot.test.js
  ● fixture 'TextAndIcon' snapshots are rendered correctly

    /assets/icons/fontawesome/regular.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Icon (ui/Icon.js:31:17)
      at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2599:14)
      at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
      at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
      at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)

내 폴더 구조는 기본적으로 다음과 같습니다.

<rootDir>
  assets
    *.png, *.svg, ...
  components
    *.js
  ui
    *.js

분명히 파일은 조롱되지 않고 여전히 로드되지만 이것을 디버깅하는 방법에 대한 단서가 없습니다.

.babelrc:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1",
    ["env", {
      "targets": {
        "browsers": [
          "last 3 versions",
          "> 1%",
          "Firefox ESR",
          "iOS 9"
        ]
      }
    }]

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

패키지.json:

  "jest": {
    "snapshotSerializers": [
      "jest-glamor-react",
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": ["js"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/assetsTransformer.js"
    }
  },

나는 바보입니다. 내 루트 폴더에 package.json 의 설정을 덮어쓴 또 다른 jest.config.js $ 가 있습니다. 아직 실행되고 있지는 않지만 더 이상 이 특정 오류가 발생하지 않습니다.

작동합니다. 다음은 중요한 사항입니다(반응 16과 함께 효소 3으로 인해 몇 가지 추가 구성이 있음을 유의하십시오).

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "env"

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
  }
}

jest.config.js

// this helps: https://github.com/facebook/jest/issues/2081#issuecomment-332406033
module.exports = {
  verbose: true,
  setupFiles: ['./jest.setup.js'],
  snapshotSerializers: ['jest-glamor-react', 'enzyme-to-json/serializer'],
  moduleFileExtensions: ['js', 'jsx'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/config/jest/assetsTransformer.js',
  },
};

jest.setup.js

import 'raf/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

그것이 누군가를 돕기를 바랍니다.

svg 파일에 문제가 있었습니다. identity-obj-proxy 로 조롱할 수 있다는 것을 깨달았습니다.

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },

이 문제를 조사하는 사람은 @timgivois 방식이 저에게 잘 맞습니다. 필요한 종속성을 얻으려면 npm install --save-dev identity-obj-proxy 를 설치해야 합니다.

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

@mbaranovski 의 솔루션이 작동하는 동안 그의 의도가 그것을 변압기로 사용하려는 것인지 모르겠습니다. 다음 출력을 생성합니다(src 속성에 주의).

<img alt="ImgName" height="28" src={ Object { "process": [Function], } } width="112" />

기본적으로 해당 모듈에서 SVG가 필요한 위치로 모든 것을 매핑하는 것입니다. 따라서 해당 모듈을 다음과 같이 간단히 처리할 수 있습니다.

module.exports = {}

위에서 설명한 다른 해결 방법은 identity-obj-proxy를 사용하는 것입니다.

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

그것은 내 하루를 저장합니다. 감사 해요!!.

@mbaranovski 테스트를 위해 jest만 실행했을 때 잘 작동했습니다. 슬프게도 create-react-app에서 반응 스크립트를 실행하려고 할 때

Out of the box, Create React App only supports overriding these Jest options

이에 대한 해결 방법이 있습니까? 아니면 유일한 해결책은 create-react-app을 꺼내는 것입니까?

CRA가 해당 옵션을 지원하지 않는다고 생각합니다. 옵션을 닫고 싶어하는 이유를 잘 모르겠습니다. 아마도 좋은 이유일 것입니다. 🙂

/cc @gaearon

다른 해결 방법:

npm i --save-dev jest-transform-stub

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

반응 네이티브 모듈에 이미지가 있습니다. assetsTransformer , identity-obj-proxy 및 jest-transform-stub 시도했습니다. assetTransformer만 작동합니다.

안녕하세요 @sibinx7 : https://github.com/facebook/jest/issues/2663/#issuecomment -317109798을 통해 해당 문제를 수정했습니다.

여기에 있는 모든 솔루션이 저에게 적합하지 않았기 때문에 jest-react-native 패키지를 사용하여 이 문제를 해결했습니다. react-native-router-flux -package 안에 있는 PNG 파일에 문제가 있기 때문에 내 문제가 다른 것일 수 있습니다.

다음은 내 package.json 파일의 일부입니다.

{
  // ... 
  "devDependencies": {
    // ...
    "jest": "^23.4.1",
    "jest-react-native": "^18.0.0",
  },
  "jest": {
    "preset": "jest-react-native",
    "verbose": true,
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/react-native/Libraries/react-native/",
      "<rootDir>/node_modules/react-native/packager/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|react-navigation|react-native-router-flux))"
    ]
  },
  // ...
}

이 경우 변환 옵션을 사용하여 xml 파일을 처리하기 위한 약간의 수정:

jest.config.js

module.exports = {
    transform: {
        ".+.(xml|bpmn)": "<rootDir>/src/__tests__/transformers/xmlTransformer.ts"
    },
}

/src/__tests__/transformers/xmlTransformer.ts (경로를 수정해야 할 수도 있습니다.프로젝트의 루트 디렉터리를 나타내는 도우미입니다).

module.exports = {
    process() {
        return 'module.exports = {};';
    },
    getCacheKey() {
        // The output is always the same.
        return 'xmlTransform';
    },
};

자세한 내용은 여기 를 참조하세요.

http://facebook.github.io/jest/docs/tutorial-webpack.html#content 를 확인하세요.

주어진 링크가 깨졌습니다

https://jestjs.io/docs/en/webpack

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

그것은 내 하루를 저장합니다. 감사 해요!!.

나는 이것에서 신호를 받아 babel-jest 를 설치한 다음 identity-obj-proxy 를 babel-jest 로 바꿉니다.

또는 이것을 사용하십시오 https://github.com/eddyerburgh/jest-transform-stub

@eddyerburgh 의 솔루션만이 저에게 효과적이었습니다.

@magnusart
당신은 내 하루를 저장, 그것은 잘 작동

./node_modules/react-native-gesture-handler/jestSetup.js 를 setupFiles 에 추가한 후 이 png 문제가 발생했습니다( react-native-gesture-handler 로 농담 문제를 해결하려는 시도였습니다).

나는 https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart using identity-obj-proxy )를 시도했지만 어떤 이유로든 enzyme 를 깨뜨렸습니다( enzyme 의 mock 를 함수가 아닌 기호로 사용). 그런 다음 https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
jest-transform-stub )를 사용했지만 아무 것도 하지 않았습니다.

결국, 나는 https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer 처음 에 webpack 솔루션)을 시도했고 그것이 나를 위해 일하는 유일한 것이었습니다.

누구든지 SVG에서 이 오류가 발생한다면 아마도 이 라이브러리를 사용할 수 있을 것입니다. https://www.npmjs.com/package/jest-svg-transformer

내 jest.config.ts 파일에만 이 코드를 추가했습니다.

transform: { '^.+\\.tsx?$': 'babel-jest', '^.+\\.svg$': 'jest-svg-transformer', },

그리고 이 파일의 코드는 다음과 같습니다.

여러분은 moduleNameMapper를 무시할 수 있습니다. 왜냐하면 제가 babel과 함께 사용자 지정 가져오기를 사용하고 있기 때문입니다.