جافاسكريبت - اختبار مكونات Svelte باستخدام Jest، غير قادر على تحميل ملفات Svelte بشكل متكرر

أنا أعمل على مشروع Svelte مع Typescript وأريد استخدام Jest لاختبار مكونات واجهة المستخدم باستخدام وحدة @testing-library/svelte. لا أستطيع استيراد جميع ملفات Svelte الخاصة بي بشكل صحيح مثل المكونات الفرعية وJest يتوقف فقط وهو يحاول تحميل التطبيق.

هناك بعض أخطاء تايبسكريبت في مكونات سفيليت ومن خلال طباعة هذه الأخطاء، أستطيع أن أرى أي الملفات تم تحميلها فعليًا. بعد تحميل App.svelte، يتجمد البرنامج ولا يقوم بتحميل أي من الوحدات الفرعية.

لست متأكدًا تمامًا من مكان الخطأ، لأنه قبل هذا الخطأ كنت أحصل على خطأ في الاستيراد مشابه لـ jest: فشل تشغيل مجموعة الاختبارات، SyntaxError: Unexpected token import، وقد "حللت" هذا عن طريق إضافة التكوين إلى ملف .babelrc وإضافة المعالج المسبق.

جميع الملفات ذات الصلة موجودة أدناه وتوجد أيضًا على Github هنا

ملف حالة الاختبار الفعلي، هناك عنصر data-testid يسمى dropzone في dropzone.svelte

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

الإجابة رقم 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'