Ignore scss while testing svelte components with Jest

Question

Problem: I want to test svelte components with jest but unable to do so since I'm unable to ignore the scss style mentioned inside the component. Is there a way to bypass the scss. My approach so far is as follows:-

jest.config.js

module.exports = {
    transform: {
        '^.+\\.svelte$': 'svelte-jester',
        '^.+\\.js$': 'babel-jest',
    },
    moduleFileExtensions: ['js', 'svelte'],
    moduleDirectories: ['node_modules', 'src'],
    moduleNameMapper: {
        "^.*\\.scss$": "SCSSStub.js"
    }
}

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
}

SCSSStub.js

module.exports = {};

Apart from this approach, I tried identity-obj-proxy as well as adding

moduleNameMapper: { '^.+\\.(css|less|scss)$': 'babel-jest',},

to jest.config.js. None of them worked.

are you getting any error with this or does it simply not work? If there's an error, could you share the error stacktrace as well? — Varun Sharma
– Varun Sharma, Commented Jun 16, 2020 at 14:19
When I configured the jest as mentioned & executed the test, I would keep getting parse error since the test can't bypass the scss in my svelte file. When I removed the scss from the svelte file, the tests would execute as intended. — Sunny
– Sunny, Commented Jun 18, 2020 at 8:56

Varun Sharma · Accepted Answer · 2020-06-18 15:03:24Z

0

The issue is because of the way you have configured moduleNameMapper. The regex would look for something like filename\.scss

There is an extra forward slash due to which the forward slash would be escaped instead of the dot resulting in the mocking happening only if there is a forward slash before the extension.

Change your regex to ^.+\.(css|less|scss)$ and it should work as expected.

answered Jun 18, 2020 at 15:03

Varun Sharma

1,7521 gold badge16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Varun Sharma Over a year ago

Can you possibly share your src and test file and the error message.

willsters · Accepted Answer · 2020-09-23 16:35:11Z

You need to have svelte-jester run the preprocesser. According to their README:

jest.config.js

// replace this line
'^.+\\.svelte$': 'svelte-jester',
// with this one
'^.+\\.svelte$': ['svelte-jester', {preprocess: true}],

Then you will likely run into the issue of not having a svelte.config.js file, which svelte-jester expects you to have if you are running the preprocessor. The discussion for that is here and a solution to it is here. For good measure, here is my solution:

svelte.config.js

import autoPreprocess from 'svelte-preprocess';

const preprocessOptions = {
  scss: {
    // your scss preprocess options here
  }
};

const preprocess = autoPreprocess(preprocessOptions);

export {
  preprocess,
  preprocessOptions
};

rollup.config.js

// ... snip
import {preprocess} from './svelte.config';
// ... snip
    svelte({
      preprocess,
      // ... other svelte options
    }),
// ... snip

EDIT: If you get errors related to native modules, then the simplest solution is to switch svelte.config.js and rollup.config.js to commonjs syntax. I was seeing that only in a particular Docker build and not on my local machine, so hopefully the above is generally correct.

Collectives™ on Stack Overflow

Ignore scss while testing svelte components with Jest

2 Answers 2

1 Comment

jest.config.js

svelte.config.js

rollup.config.js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

jest.config.js

svelte.config.js

rollup.config.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related