이미지를 가져오면 재스트 테스트가 중단됩니다.

이미지를 가져오면 재스트 테스트가 중단됩니다.

자산을 가져오는 리액트 컴포넌트(예: "../../../assets/img/logo.png"에서 로고를 가져오면 이러한 오류가 발생합니다.

({"오브젝트") : function (module, exports, require, _dirname, _filename, global, jest) { }PNG
구문 오류:ScriptTransformer의 토큰이 잘못되었거나 예기치 않은 토큰입니다._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)

나의 농담 설정은

"jest": {
"testRegex": ".*\\.spec\\.js$",
"moduleFileExtensions": [
  "js",
  "jsx",
  "json"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "assets"
],
"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)$": "<rootDir>/__mocks__/styleMock.js"
},
"verbose": true,
"bail": true
}

제가 무엇을 빠뜨리고 있나요?

이미지 파일을 Import할 때 Jest는 이미지의 바이너리 코드를 .js로 해석하려고 하므로 오류가 발생합니다.

유일한 탈출구는 재담이 이미지 Import를 볼 때마다 기본 응답을 조롱하는 것입니다!

우리가 이걸 어떻게 해요?

• 먼저 이미지 Import가 발생할 때마다 Jest에게 모의 파일을 실행하도록 지시합니다.패키지에 아래 키를 추가하여 이 작업을 수행합니다.json 파일

"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
      "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
}

주의: 이미 다음을 가지고 있는 경우"Jest"키, 키만 추가하면 됩니다."moduleNameMapper"어린애

• 마지막으로 작성한다.mocks루트에 있는 폴더 및 생성fileMock.js파일 안에 파일을 입력합니다.아래의 스니펫으로 파일을 채웁니다.

module.exports = ''; 

주의: es6를 사용하는 경우export default '';에스린트 깃발을 피하다

위의 단계를 완료하면 테스트를 다시 시작할 수 있으며 시작할 수 있습니다.

참고. 이미지 파일의 다양한 확장자를moduleNameMapper조롱당할 수 있도록 말이야

제가 도울 수 있었기를 바랍니다.#아쉬워!

이 문제를 조사하는 모든 사람을 위해.인스톨을 실시할 필요가 있습니다.npm install --save-dev identity-obj-proxy필요한 의존성을 얻을 수 있습니다.

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

저도 같은 문제가 있어서 다음과 같이 해결했습니다.

1. npm install -D jest-transform-stub
2. 그럼 포장해서.json, 다음 변환을 추가했습니다.

    "jest": {
        ...
        "transform": {
            ...
            ".+\\.(css|scss|png|jpg|svg)$": "jest-transform-stub"

나도 같은 문제가 있었어!원래 질문에서와 같은 경우인지 확실하지 않지만, joke는 여전히 JS로 이미지를 로드하고 이미지 확장자와 일치하는 파일을 mock in에 매핑하는 동안 그것들을 해석하려고 했습니다.moduleNameMapper내 파일에는 또한 맵을 만들기 위한 코드도 포함되어 있다.@루트 src 디렉토리로 문자를 지정합니다.웹 팩이 있고 프로젝트(및 TS)에서 웹 팩에일리어스로 설정되어 있기 때문입니다.풀moduleNameMapper에의 기입jest.config.js제 눈에는 이렇게 생겼어요

    moduleNameMapper: {
        '^@$': '<rootDir>/src',
        '^@/(.*)':
            '<rootDir>/src/$1',
        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/__mocks__/fileMock.js',
        // '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
        '.*\\.(css|less)$': 'identity-obj-proxy',
    }

컴포넌트의 이미지를 Import 했을 때, 패스는 「@/assets/someImage.jpg」와 같았습니다.하지만, 이것은 첫 번째 정규식과 일치할 것 같습니다.@ "Alias" (에일리어스)^@/(.*)그, 것, to, to, 것으로 매핑이 되고 있었습니다.<rootDir>/src/$1<rootDir>/__mocks__/fileMock.js.

에일리어스를 이미지 이외의 것과만 일치시켜 수정했습니다.

    moduleNameMapper: {
        '^@$': '<rootDir>/src',
        '^@/(.*)\\.(?!jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/src/$1',
        '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/__mocks__/fileMock.js',
        // '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
        '.*\\.(css|less)$': 'identity-obj-proxy',
    }

bellow 행을 jeast.config.js 파일에 추가하면 테스트에 합격할 수 있었습니다.

"\\.(jpg|jpeg|png)$": "identity-obj-proxy",

예:

 moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png)$": "identity-obj-proxy",
  },

webpack에서 jeast를 사용하는 경우 명시적으로 설정해야 합니다.이 가이드를 참조해 주세요.https://jestjs.io/docs/webpack

하시는 분Vue test utilNuxt 2 이 하게 됩니다.({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){ SyntaxError: Invalid or unexpected token

을 붙여 fileTransformer.js test/unit다음 코드를 추가합니다.

const path = require('path')

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

다음 코드를 에 추가합니다.jest.config.js 삭제:

  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    '<rootDir>/test/unit/fileTransformer.js',
    // ... other configs
  },

에 IOS 이미지 이름이 @

moduleNameMapper: {
    "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
    "^[@./a-zA-Z0-9$_-]+\\.(png|gif)$": "RelativeImageStub"
  }

에서는 "Respect Native"를합니다.preset: 'react-native'

https://github.com/facebook/react-native/blob/main/jest-preset.js

「」를 추가합니다.transformjest.config.js

  transform: {
    '^.+\\.(js|ts|tsx)$': 'babel-jest',
    '^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
      '../node_modules/react-native/jest/assetFileTransformer.js',
    ),
  },

React Native를 사용하지 않을 경우 프로젝트에 https://github.com/facebook/react-native/blob/main/jest/assetFileTransformer.js 파일을 생성하여 경로를 변경해야 합니다.require.resolve

지금까지 아무 것도 효과가 없었기 때문에, 「mount」를 「shallow」로 대체해 버렸고, 현재는 정상적으로 동작하고 있습니다.

 npm install --save-dev identity-obj-proxy 

jeast.config.displays에 다음 내용을 추가합니다.

moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png)$": "identity-obj-proxy",
  },

이것은 나에게 효과가 있었다.

언급URL : https://stackoverflow.com/questions/46898638/importing-images-breaks-jest-test