P粉2564870772023-08-27 00:35:45
vue-jest
无法解析SFC中顶级块标签的src
URL,因此您需要在src/components/core/App/index.vue
中使用未别名的相对路径:
1 2 3 |
|
vue-jest
使用@vue/component-compiler-utils
编译模板,但URL解析需要transformAssetUrls
选项。 vue-jest
3.x不支持向@vue/component-compiler-utils
传递选项,但在4.0.0-rc.1中通过templateCompiler.transformAssetUrls
配置实现。
即使启用了URL解析,Vue CLI配置jest
以返回空字符串以获取require
的媒体,包括图像。如果您的测试需要与正常解析的URL一起在生产环境中工作,您将需要一个模仿url-loader
的Jest转换器。Vue CLI配置加载器以如果大于4KB,则返回解析的文件名; 否则返回base64数据URL。
要启用URL解析:
升级到vue-jest
4:
1 |
|
为自定义的my-jest-url-loader
创建以下文件,稍后将在下面使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
为了避免意外覆盖Vue CLI的默认Jest预设,使用合并工具(例如lodash.merge
)在jest.config.js
中插入自定义配置。
在Jest全局中添加一个vue-jest
配置,设置templateCompiler.transformAssetUrls
。
修改合并预设的transform
属性,使用我们的my-jest-url-loader
转换器来处理图像。这需要从默认Jest预设中删除其他图像转换器,以避免冲突。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
|