这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

第一个坑：jest测试环境配置有问题

20220126 #4 closed

开发配置：jest测试环境配置有问题，按照该Jest单元测试配置和所遇问题解决办法 - 掘金链接的指示，add.test.ts无法运行测试，vue-cli建的jest-unit示例代码可正常执行，测试覆盖率也可以显示。

查看官方文档 @vue/cli-plugin-unit-jest | Vue CLI

Run unit tests with Jest. Default testMatch is <rootDir>/(tests/unit/ / *.spec.(js|jsx|ts|tsx)| */__tests__/ .(js|jsx|ts|tsx)) which matches:

• Any files in tests/unit that end in .spec.(js|jsx|ts|tsx);
• Any js(x)/ts(x) files inside tests directories

更改文件后缀名后成功运行

第二个坑：stylelint没配置好，掉进连环坑

发现这个问题首先源于如图的scss文件无法引入

后经查找vite官方文档，检查是否是语法有问题

---

将 button.scss 改为 button.module.scss

并使用index.scss 引用它

---

此时每次保存发现代码@import '../../styles/index';总会自动变为@import url('../../styles/index');

在MDN文档中可知，使用@import url()仅能读取前35行样式，故该写法不能满足项目要求。

后检查了package.json，将--fix均删除

仍存在该问题。

后发现在vite.config.ts 中，有下列代码 plugins: [vue(), eslintPlugin(), StylelintPlugin({fix:true})],

改为 plugins: [vue(), eslintPlugin(), StylelintPlugin()],后不会再自动fix。

——而且eslint等文件的配置应当写在单独的文件中，在vite.config.ts中写配置不利于错误查找。

---

好不容易把自动更改关闭了，但是此时stylelint仍有报错，问题还没有解决。

查找stylelint官方文档后发现，是其import-notation控制的标准样式。

解决方法如下： 在.stylelintrc.cjs文件中，更改或添加该部分配置：

"rules": {

    'import-notation': "string",
    
    }

最终问题解决。

第三个坑：stylelint14版本不支持vue3

stylelint官方文档推荐的办法是将stylelint降级,将package.json中的依赖版本项改为 "stylelint": "@^13.x",