如何解决Jest 无法处理使用参数导入的 SVG 文件
在“vue-svg-loader”模式下使用 @nuxtjs/svg,SVG 的导入方式如下:
import ArrowRight from '~/assets/img/arrow-right.svg?inline'
但是 Jest
的“?inline”部分有问题:
Could not locate module ~/assets/img/arrow-right.svg?inline mapped as:
D:\path\to\project\$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^~\/(.*)$/": "D:\path\to\project\$1"
},"resolver": undefined
}
我尝试了对 previous similar question 给出的两个答案,但在每种情况下我都遇到相同的错误。
关于如何解决这个问题有什么建议吗?
解决方法
对于遇到此问题的任何人,解决方案是here:
jest.config.js
module.exports = {
moduleFileExtensions: ["js","jsx","json","vue"],transform: {
"^.+\\.svg": "<rootDir>/svgTransform.js","^.+\\.vue$": "vue-jest",".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub","^.+\\.jsx?$": "babel-jest"
},moduleNameMapper: {
"^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1","^@/(.*)$": "<rootDir>/src/$1"
},snapshotSerializers: ["jest-serializer-vue"],testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],testURL: "http://localhost/",collectCoverageFrom: ["!**/src/__mocks__/**","**/src/**/*.{js,vue}"]
};
关键点如下:
“您感兴趣的行是这一行,"^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1"
。小心地将其添加到默认正则表达式 "^@/(.*)$": "<rootDir>/src/$1"
之上,这里的订单数。”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。