当Svelte配置包括svelte-预处理时，Jest挂起

Question

该雪包Svelte模板包括一个Jest设置，这是很好的Svelte应用程序和工作的方框。但是，一旦添加了svelte-preprocess，Jest就会无限期地挂起。

使用https://github.com/agneym/svelte-tailwind-snowpack可以很容易地看到这一点，可以使用以下方法进行设置：

npx create-snowpack-app dir-name --template svelte-tailwind-snowpack

svelte.config.js看起来是这样的，尽管预处理器不包括尾风，但它仍然挂起：

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

必须弹出默认的斯诺包配置文件，并使用svelte-jester而不是他们正在使用的配置。下面的配置工作如下：

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 {};
}