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

Question

我正在开发一个带有类型记录的Svelte，并希望使用Jest来使用@testing库/svelte模块测试UI组件。我无法正确导入我所有的苗条文件，像我的子组件和Jest只是挂起，试图加载应用程序。

在svelte组件中有一些类型记录错误，通过这些错误打印，我可以看到哪些文件实际加载。加载App.svelte之后，程序就会冻结，不会加载任何子模块。

我不太清楚错误在哪里，因为在此错误之前，我得到了一个类似于jest:测试套件运行失败，SyntaxError:意外令牌导入的导入错误，我通过将配置添加到.babelrc文件并添加预处理器来“解决”了这个问题。

​

​

所有相关文件都在下面，并且都在Github这里上。

在实际的测试用例文件中，dropzone.svelte中有一个名为dropzone的数据元素。

// 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"]
        }
    }
}

Answer 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'