使用 Jest 进行 Svelte 组件测试，无法递归加载 Svelte 文件答案

【问题标题】：Svelte Component Testing with Jest, Unable to load Svelte files recursively使用 Jest 进行 Svelte 组件测试，无法递归加载 Svelte 文件
【发布时间】：2020-07-13 06:28:11
【问题描述】：

我正在使用 Typescript 开发一个 Svelte 项目，并希望使用 Jest 来测试使用 @testing-library/svelte module 的 UI 组件。我无法正确导入我的所有细长文件，例如我的子组件，并且 Jest 只是在尝试加载应用程序时挂起。

苗条组件中有一些打字稿错误，通过这些错误打印，我可以看到实际加载了哪些文件。加载 App.svelte 后，程序只是冻结，不加载任何子模块。

我不确定错误在哪里，因为在此错误之前我遇到了类似于 jest: Test suite failed to run, SyntaxError: Unexpected token import 的导入错误，我通过将配置添加到 .babelrc 文件并添加预处理器来“解决”这个问题。

所有相关文件都在下面，也在Github here上

实际的测试用例文件，在dropzone.svelte中有一个叫dropzone的data-testid元素

// app.spec.js
import App from "../src/App.svelte";

import { render, fireEvent } from "@testing-library/svelte";

describe("UI Load Test", () => {
  it("Check Dropzone Loaded", () => {
    const { getByText, getByTestId } = render(App);
    const dropzone = getByTestId("dropzone");
    expect(dropzone).toBeDefined();
  });
});

// App.svelte
<script lang="ts">
  ...

  // Static Svelte Components

  import HeaderContent from "./components/header.svelte";
  import Loader from "./components/loader.svelte";
  import Footer from "./components/footer.svelte";

  // Dynamic Svelte Modules
  import Terminal from "./modules/terminal/terminal.svelte";
  import Dropzone from "./modules/dropzone/dropzone.svelte";
  import Configure from "./modules/configure/configure.svelte";
  import Video from "./modules/video/video.svelte";
  import Progress from "./modules/progress/progress.svelte";

  let loaded = $loadedStore;
  ...
  let fileState = $fileUploaded;
  ...
  let processedState = $processed;
  ...
  let progressState = $progressStore;
  ...
  let configState = $showConfig;
  ...
</script>

...

// jest.config.js
const {
  preprocess: makeTsPreprocess,
  createEnv,
  readConfigFile,
} = require("@pyoner/svelte-ts-preprocess");

const env = createEnv();
const compilerOptions = readConfigFile(env);
const preprocessOptions = {
  env,
  compilerOptions: {
    ...compilerOptions,
    allowNonTsExtensions: true,
  },
};
const preprocess = makeTsPreprocess(preprocessOptions);

module.exports = {
  transform: {
    "^.+\\.svelte$": [
      "jest-transform-svelte",
      { preprocess: preprocess, debug: true },
    ],
    "^.+\\.ts$": "ts-jest",
    "^.+\\.js$": "babel-jest",
  },
  moduleDirectories: ["node_modules", "src"],
  testPathIgnorePatterns: ["node_modules"],
  bail: false,
  verbose: true,
  transformIgnorePatterns: ["node_modules"],
  moduleFileExtensions: ["js", "svelte", "ts"],
  setupFilesAfterEnv: [
    "./jest.setup.js",
    "@testing-library/jest-dom/extend-expect",
  ],
};

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

//.babelrc
{
    "plugins": [

        "@babel/plugin-syntax-dynamic-import"
    ],
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    }
}

【问题讨论】：

你可能会考虑单独测试你的组件并模拟它们，当它们被用作依赖时。
你的意思是不单独测试每个模块而不导入任何其他苗条模块？就像一些无法运行的实际节点模块一样，我会模拟它们，但我希望能够一起测试整个 UI/UX。喜欢测试应用的关注
这听起来像是您想要 e2e 测试？有几个框架。看看：slant.co/topics/8034/~javascript-end-to-end-testing-tools

标签： javascript typescript jestjs babeljs svelte

【解决方案1】：

您尚未从 store.ts 文件“$loadedStore, $fileUploaded, $processed, $progressStore, $showConfig”中导入这些变量

基本上，你可以把它放在这样的 store.ts 上。

// store.ts 
export const loadedStore= writable([]) // for arrays

export const fileUploaded= writable({}) // for objects

export const processed = writable("") // for strings

export const progressStore = writable("")

export const showConfig= writable({})

然后将此行添加到您的 App.svelte 文件的顶部

// App.svelte

import { loadedStore, fileUploaded, processed, progressStore, showConfig } from 'store.ts'

【讨论】：