Jest hangs when Svelte configuration includes svelte-preprocess - jestjs

Question

The Snowpack Svelte template includes a Jest setup which works well for Svelte apps and works out of the box. However, once svelte-preprocess is added, Jest hangs indefinitely.
This can easily be seen using https://github.com/agneym/svelte-tailwind-snowpack, which can be setup with:
npx create-snowpack-app dir-name --template svelte-tailwind-snowpack
svelte.config.js looks like this, although even if the pre-processor doesn't include Tailwind it still hangs:
const sveltePreprocess = require("svelte-preprocess");
const preprocess = sveltePreprocess({
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
});
module.exports = {
preprocess,
};
jest.config.js
const fs = require("fs");
const path = require("path");
// Use this instead of `paths.testsSetup` to avoid putting
// an absolute filename into configuration after ejecting.
// const setupTestsFile = fs.existsSync(paths.testsSetup)
// ? `<rootDir>/src/setupTests.js`
// : undefined;
const setupTestsFile = true;
module.exports = function () {
const userSvelteConfig = getUserSvelteConfig();
return {
testMatch: [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
],
transform: {
"^.+\\.svelte$": [
"jest-transform-svelte",
{ preprocess: userSvelteConfig.preprocess },
],
"^.+\\.(js|ts)$": path.resolve(__dirname, "jest/babelTransform.js"),
},
moduleFileExtensions: ["js", "ts", "svelte"],
testPathIgnorePatterns: ["node_modules"],
transformIgnorePatterns: ["node_modules"],
bail: false,
verbose: true,
setupFilesAfterEnv: setupTestsFile ? ["<rootDir>/jest.setup.js"] : [],
};
};
function getUserSvelteConfig() {
const userSvelteConfigLoc = path.join(process.cwd(), "svelte.config.js");
if (fs.existsSync(userSvelteConfigLoc)) {
return require(userSvelteConfigLoc);
}
return {};
}

Answer 1

Have to eject the default Snowpack configuration file and use svelte-jester instead of the config they were using. The config below works:
const fs = require("fs");
const path = require("path");
// Use this instead of `paths.testsSetup` to avoid putting
// an absolute filename into configuration after ejecting.
// const setupTestsFile = fs.existsSync(paths.testsSetup)
// ? `<rootDir>/src/setupTests.js`
// : undefined;
const setupTestsFile = true;
module.exports = function () {
const userSvelteConfig = getUserSvelteConfig();
return {
rootDir: "./",
testMatch: [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
],
transform: {
"^.+\\.svelte$": [
"svelte-jester",
{ "preprocess": true },
],
"^.+\\.(js|ts)$": "babel-jest",
},
moduleFileExtensions: ["js", "ts", "svelte"],
testPathIgnorePatterns: ["node_modules"],
transformIgnorePatterns: ["node_modules"],
bail: false,
verbose: true,
setupFilesAfterEnv: setupTestsFile ? ["<rootDir>/jest.setup.js"] : [],
};
};
function getUserSvelteConfig() {
const userSvelteConfigLoc = path.join(process.cwd(), "svelte.config.js");
if (fs.existsSync(userSvelteConfigLoc)) {
return require(userSvelteConfigLoc);
}
return {};
}