Jest: "Erro de sintaxe: token inválido ou inesperado" com .png

Confira http://facebook.github.io/jest/docs/tutorial-webpack.html#content

EDIT: o novo link é https://jestjs.io/docs/en/webpack

@matheusml você resolveu isso? @cpojer Posso confirmar que também estou tendo esse problema. Eu tenho ativos estáticos fora da minha fonte. ou seja, minha estrutura de diretórios se parece com:

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

Minha configuração do jest é semelhante ao exemplo dado no link:

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

Meu teste falha quando tenta importar a imagem:

import thumbnail from 'img/thumbnail.png'

Acho que é importante observar que, se eu não incluir o diretório public em moduleDirectories , recebo o erro: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

Isso é esperado? Deve realmente validar a existência de um evento de importação embora o mapeamento do módulo já esteja configurado? Caso contrário, recebo o mesmo erro acima. Eu não tentei nenhum outro tipo de importação no mapeador de nomes.

Estou enfrentando o mesmo problema, estou tentando implementar a renderização do servidor reactjs. Qualquer correção para isso.

Eu coloquei isso no meu babelrc e as coisas parecem estar funcionando:

{
"predefinições": ["es2015", "reagir"]
}

Erro do mesmo tipo

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 <

Também parece que estou com esse problema. Isso só acontece quando eu exijo o png.

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

Mesmo erro também. Alguém conserta?

Tem o mesmo erro com .mp3, nada ajuda

Erros como esse também podem ser resultado do uso de uma predefinição com caminhos absolutos definidos no mapeador de nome do módulo, por exemplo. Este caso, no entanto, será corrigido na próxima versão

Eu tive o mesmo erro e resolvi criando um assetsTransformer.js :

const path = require('path');

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

Em seguida, adicione isso à sua configuração jest em package.json:
"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" } },

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

No meu caso, não percebi que <rootDir> é um token fornecido pelo Jest e presumi que era algo que eu precisava substituir. Adicioná-lo às entradas moduleNameMapper resolveu o problema.

Adicionei o assetTransformer.js mencionado por @bombellos. Também seguiu as instruções em Usando com webpack . Mas ainda recebo os mesmos erros.

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)

Minha estrutura de pastas é basicamente:

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

Aparentemente, os arquivos ainda são carregados em vez de ridicularizados, mas não tenho ideia de como depurar isso.

.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"]
    }
  }
}

pacote.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"
    }
  },

Eu sou burro, eu tinha outro jest.config.js na minha pasta raiz que substituiu as configurações em package.json . Embora ainda não esteja em execução, não recebo mais esse erro específico.

Deu certo. Aqui estão os bits importantes (observe que eu tenho algumas configurações adicionais devido à enzima 3 com react 16):

.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() });

Espero que ajude alguém.

Eu estava tendo problemas com um arquivo svg . Percebi que poderia zombar com identity-obj-proxy :

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

Para quem está analisando esse problema, o caminho do @timgivois funciona lindamente para mim. Você tem que instalar npm install --save-dev identity-obj-proxy para obter as dependências necessárias.

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

Enquanto a solução do @mbaranovski funciona, não sei se a intenção dele era usá-la como transformador. Ele produz a seguinte saída (preste atenção ao atributo src):

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

Essencialmente, está mapeando tudo daquele módulo para o local onde eu precisei de um SVG. Assim, você pode se safar com esse módulo simplesmente sendo:

module.exports = {}

A outra solução alternativa conforme indicado acima é usar identity-obj-proxy.

@magnusart

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

salva meu dia. Obrigado!!.

@mbaranovski Funcionou muito bem quando executei apenas jest para teste. Infelizmente, quando tento executar os scripts react do create-react-app, recebo

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

Existe uma solução para isso? Ou a única solução é ejetar create-react-app?

Eu não acho que CRA suporta essa opção. Não sei por que ele quer fechar as opções, provavelmente um bom motivo 🙂

/cc @gaearon

Outra solução alternativa:

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

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

Eu tenho um módulo react native que tem imagens. Eu tentei assetsTransformer , identity-obj-proxy e jest-transform-stub . Apenas assetsTransformer funciona.

Oi @sibinx7 Corrigi esse problema por: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

Resolvi isso usando o pacote jest-react-native , pois todas as soluções aqui não funcionaram para mim. Talvez meu problema seja diferente, porque tive problemas com arquivos PNG dentro do pacote react-native-router-flux .

Aqui alguns fragmentos do meu arquivo 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))"
    ]
  },
  // ...
}

Pequena modificação para manipulação de arquivos xml, neste caso usando a opção transform :

jest.config.js

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

/src/__tests__/transformers/xmlTransformer.ts (pode ser necessário modificar o seu caminho,é um auxiliar que representa o diretório raiz do projeto).

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

Veja aqui para mais detalhes.

Confira http://facebook.github.io/jest/docs/tutorial-webpack.html#content

O link informado está quebrado

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

@magnusart

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

salva meu dia. Obrigado!!.

Eu peguei uma sugestão disso e instalei babel-jest então eu substituo identity-obj-proxy por babel-jest

ou use este https://github.com/eddyerburgh/jest-transform-stub

apenas a solução de @eddyerburgh funcionou para mim.

@magnusart
você salva meu dia, funciona bem

Eu tive esse problema png depois de adicionar ./node_modules/react-native-gesture-handler/jestSetup.js a setupFiles (essa foi minha tentativa de resolver o problema do jest com react-native-gesture-handler ).

Eu tentei https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart usando identity-obj-proxy ), mas quebrou enzyme por qualquer motivo (fez enzyme mock em um símbolo em vez de uma função). Então eu tentei https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
usando jest-transform-stub ), mas não fez nada.

Eventualmente, eu tentei https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer a solução webpack no início), e essa foi a única que funcionou para mim.

Se alguém está recebendo este erro com SVG, provavelmente pode usar esta lib, funcionou muito bem para mim https://www.npmjs.com/package/jest-svg-transformer

Eu só adicionei no meu arquivo jest.config.ts este código

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

E o código neste arquivo é este

vocês podem ignorar moduleNameMapper, é só porque estou usando importação personalizada com babel