javascript - Svelte-componenttesten met Jest, Kan Svelte-bestanden niet recursief laden

Ik werk aan een Svelte-project met Typescript en wil Jest gebruiken om UI-componenten te testen met behulp van de @testing-library/svelte-module. Ik kan niet al mijn Svelte-bestanden zoals mijn subcomponenten correct importeren en Jest blijft gewoon hangen bij het proberen de applicatie te laden.

Er zijn enkele TypeScript-fouten in de Svelte-componenten en door deze fouten te printen, kan ik zien welke bestanden daadwerkelijk geladen zijn. Na het laden van App.svelte bevriest het programma gewoon en laadt het geen van de submodules.

Ik weet niet precies waar de fout zit, want vóór deze fout kreeg ik een importfout die leek op grap: Testsuite kon niet worden uitgevoerd, SyntaxError: Onverwachte tokenimport. Ik heb dit 'opgelost' door de configuratie toe te voegen aan het .babelrc-bestand en de preprocessor toe te voegen.

Alle relevante bestanden staan hieronder en zijn ook hier op Github te vinden

Het daadwerkelijke testgevalbestand, er is een data-testid-element genaamd dropzone in 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"]
        }
    }
}

Antwoord #1

Je hebt deze variabelen nog niet geïmporteerd uit je store.ts-bestand "$loadedStore, $fileUploaded, $processed, $progressStore, $showConfig"

In principe kun je dit op een store.ts zetten zoals dit.

// 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({})

Voeg dan deze regel bovenaan je App.svelte-bestand toe

// App.svelte

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