javascript - Test de composant Svelte avec Jest, Impossible de charger les fichiers Svelte de manière récursive

Je travaille sur un projet Svelte avec Typescript et je veux utiliser Jest pour tester les composants UI en utilisant le module @testing-library/svelte. Je ne parviens pas à importer correctement tous mes fichiers Svelte comme mes sous-composants et Jest reste bloqué en essayant de charger l'application.

Il y a quelques erreurs TypeScript dans les composants Svelte et grâce à l'impression de ces erreurs, je peux voir quels fichiers ont réellement été chargés. Après le chargement de App.svelte, le programme se fige simplement et ne charge aucun des sous-modules.

Je ne suis pas exactement sûr où se situe l'erreur, car avant cette erreur, j'obtenais une erreur d'importation similaire à jest : Échec de l'exécution du test, SyntaxError : Jeton import inattendu, j'ai « résolu » cela en ajoutant la configuration au fichier .babelrc et en ajoutant le préprocesseur.

Tous les fichiers pertinents sont ci-dessous et sont également sur Github ici

Le fichier de cas de test réel, il y a un élément data-testid appelé dropzone dans 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"]
        }
    }
}

Réponse #1

Vous n'avez pas encore importé ces variables de votre fichier store.ts : "$loadedStore, $fileUploaded, $processed, $progressStore, $showConfig"

Fondamentalement, vous pouvez mettre ceci sur un store.ts comme ceci.

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

Puis ajoutez cette ligne en haut de votre fichier App.svelte

// App.svelte

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