0
740
Vistas¿Por qué no puedo importar SVG en Jest?
Este es el componente que quiero probar.
pie de página/index.jsx
import React from "react"; import logoImg from "@/assets/images/components/header/logo-header.svg"; import HeaderTextImg from "@/assets/images/components/header/header-text.svg"; function Footer() { return ( <div>Footer</div> ); } export default Footer; Cuando ejecuto la prueba por npm run test , muestra un error
paquete.json
"scripts": { "test": "jest --watchAll", "test-coverage": "jest --coverage", }, "jest": { "moduleDirectories": [ "node_modules", "src" ], "moduleNameMapper": { "\\.(css|scss)$": "identity-obj-proxy" }, "setupFilesAfterEnv": [ "<rootDir>/src/setupTests.js" ], "snapshotSerializers": [ "enzyme-to-json/serializer" ] } lo que probé
Traté de usar jest-svg-transformer en package.json como a continuación:
"transform": { "^.+\\.jsx?$": "babel-jest", "^.+\\.svg$": "jest-svg-transformer" } también muestra error:
● Invalid transformer module: "/Users/CCCC/Desktop/SourceTree/my-proj/node_modules/jest-svg-transformer/lib/index.js" specified in the "transform" object of Jest configuration must export a `process` or `processAsync` or `createTransformer` function. Code Transformation Documentation: https://jestjs.io/docs/code-transformation Actualización 1
yo también probé
moduleNameMapper: { "^.+\\.svg$": "jest-svg-transformer", }pero tampoco funciona
Actualización 2
Probé svg-jest también pero aún no funciona
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
- Instale el paquete camelcase (npm install -D camelcase) (hilo agregue -D camelcase)
- Cree el archivo fileTransform.js en su directorio jest
/broma/transforms/fileTransform.js
const path = require('path'); const camelcase = require('camelcase'); module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 const pascalCaseFilename = camelcase(path.parse(filename).name, { pascalCase: true, }); const componentName = `Svg${pascalCaseFilename}`; return `const React = require('react'); module.exports = { __esModule: true, default: ${assetFilename}, ReactComponent: React.forwardRef(function ${componentName}(props, ref) { return { $$typeof: Symbol.for('react.element'), type: 'svg', ref: ref, key: null, props: Object.assign({}, props, { children: ${assetFilename} }) }; }), };`; } return `module.exports = ${assetFilename};`; }, };Agregue lo siguiente en package.json:
transform: { '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': '<rootDir>/jest/transforms/fileTransform.js', },
·
Juan Pablo Isaza
Denunciar
Responde la pregunta