ParseError: Colon is expected (svelte with scss style) svelte unit testing

Viewed 474

I am trying to write a test for the component which is using SCSS as default styling. But the test is throwing error that it's not able to understand SCSS

myComponent.svelte

<div>Hello <span>world</span></div>
<style>
div {
 padding: 20px;
 span {
  font-weight: bold;
 }
}
</style>

Test File

// mycomponent.test.js
import { render } from '@testing-library/svelte';
import MyComponent from './MyComponent.svelte';
...
const { component } = render(MyComponent, {});
...

Jest Config

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svelte$': ['svelte-jester', { preprocess: true, 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, // Automatically clear mock calls and instances before every test.
};

I am setting the default style to SCSS in the svelte config

svelte.config.js

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

module.exports = {
  preprocess: preprocess({ defaults: { style: 'scss' } }),
};

Error Stack

Colon is expected
4:     padding: 20px;
5: 
6:     span {
              ^
7:       font-weight: bold;
8:     }
ParseError: Colon is expected

      at error (node_modules/svelte/src/compiler/utils/error.ts:25:16)
      at Parser$1.error (node_modules/svelte/src/compiler/parse/index.ts:101:3)
      at Object.read_style [as read] (node_modules/svelte/src/compiler/parse/read/style.ts:31:11)
      at tag (node_modules/svelte/src/compiler/parse/state/tag.ts:189:27)
      at new Parser$1 (node_modules/svelte/src/compiler/parse/index.ts:53:12)
      at parse (node_modules/svelte/src/compiler/parse/index.ts:218:17)
      at Object.compile (node_modules/svelte/src/compiler/compile/index.ts:93:14)
      at compiler (node_modules/svelte-jester/dist/transformer.cjs:135:32)
      at Object.processSync [as process] (node_modules/svelte-jester/dist/transformer.cjs:111:12)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)

To reproduce clone and run this repo https://github.com/rparsh/svelte-testing-scss

1 Answers

Add lang="scss" to the <style> tag:

<style lang="scss">
</style>

In general it's no longer recommended to use default languages because of issues like this. You can't be sure that all tooling in the ecosystem supports reading the defaults. That's also why this setting was removed from the docs and svelte-preprocess now prints a warning that you should no longer use it.

Related