reactjs - test - SyntaxError con Jest y React e importación de archivos CSS

snapshot testing react

Question

Estoy intentando que mi primera prueba de jest pase con React y Babel.

Estoy teniendo el siguiente error:

SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.

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

Mi configuración package.json para jest se parece a esto:

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

Entonces, ¿qué me estoy perdiendo?

Answer 1

moduleNameMapper es la configuración que le dice a Jest cómo interpretar archivos con una extensión diferente. Necesitas decirle cómo manejar los archivos de Less.

Cree un archivo como este en su proyecto (puede usar un nombre o ruta diferente si lo desea):

config/CSSStub.js

module.exports = {};

Este código auxiliar es el módulo que le diremos a Jest que use en lugar de los archivos CSS o Less. Luego, cambie la configuración de moduleNameMapper y agregue esta línea a su objeto para usarla:

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

Ahora Jest tratará cualquier archivo CSS o Menos como un módulo que exporta un objeto vacío. También puede hacer otra cosa, por ejemplo, si usa módulos CSS, puede usar un proxy para que cada importación devuelva el nombre de la propiedad importada.

Lea más en esta guía: https://facebook.github.io/jest/docs/en/webpack.html

Answer 2

moduleNameMapper esto usando la clave moduleNameMapper en las configuraciones de jest en el archivo package.json

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

Después de esto, deberá crear los dos archivos como se describe a continuación.

• __mocks__/styleMock.js

  module.exports = {};

• __mocks__/fileMock.js

  module.exports = ''test-file-stub'';

Si está utilizando módulos CSS, entonces es mejor simular un proxy para habilitar las búsquedas de className. Por lo tanto sus configuraciones cambiarán a:

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

Pero necesitará instalar el paquete identity-obj-proxy como una dependencia de desarrollo, es decir,

yarn add identity-obj-proxy -D

Para más información. Puedes consultar los https://facebook.github.io/jest/docs/en/webpack.html