使用SCSS样式的Svelte组件单元测试抛出ParseError: Colon is expected错误

该报错是Svelte原生编译器将你的SCSS嵌套语法识别为普通CSS导致的，核心问题是测试运行时svelte-jester没有加载到你配置的SCSS预处理规则，无法识别嵌套写法。

方案1：Jest配置中显式传入预处理规则 #

svelte-jester默认不会主动读取项目根目录的svelte.config.js配置，你可以直接在Jest配置中传入预处理规则，修改你的jest.config.js如下：

const preprocess = require('svelte-preprocess');

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svelte$': ['svelte-jester', { 
      // 直接显式传入SCSS默认预处理配置
      preprocess: preprocess({ defaults: { style: 'scss' } }),
      debug: true 
    }],
  },
  // 其余原有配置保持不变
  moduleFileExtensions: ['js', 'svelte'],
  roots: ['<rootDir>/app/modules'],
  modulePaths: ['<rootDir>/app/modules'],
  moduleDirectories: ['node_modules', 'app/modules'],
  setupFilesAfterEnv: [
    '<rootDir>/app/modules/tests/setupTest.js',
    '@testing-library/jest-dom/extend-expect',
  ],
  clearMocks: true,
};

修改前请先确保你已经安装了必要依赖：

npm install sass svelte-preprocess --save-dev

方案2：兜底方案（无需修改配置） #

如果不想调整测试配置，你可以直接在组件的style标签上添加lang="scss"属性即可让编译器正确识别语法：

<style lang="scss">
div {
 padding: 20px;
 span {
  font-weight: bold;
 }
}
</style>

修改完成后重新运行测试即可解决SCSS语法识别错误问题。

内容的提问来源于stack exchange，提问作者Arshpreet Wadehra