javascript - Svelte-komponenttesting med Jest, Kan ikke laste Svelte-filer rekursivt

Jeg jobber med et Svelte-prosjekt med Typescript og ønsker å bruke Jest for å teste UI-komponenter ved bruk av @testing-library/svelte-modulen. Jeg klarer ikke å importere alle Svelte-filene mine, som mine underkomponenter, ordentlig, og Jest henger bare når det prøver å laste applikasjonen.

Det er noen typescript-feil i svelte-komponentene, og ved å skrive ut disse feilene kan jeg se hvilke filer som faktisk ble lastet. Etter å ha lastet App.svelte, fryser programmet bare og laster ingen av undermodulene.

Jeg er ikke helt sikker på hvor feilen er, fordi før denne feilen fikk jeg en importfeil som lignet på jest: Test suite failed to run, SyntaxError: Unexpected token import, jeg "løste" dette ved å legge til konfigurasjonen i .babelrc-filen og legge til preprosessoren.

Alle de relevante filene er nedenfor og finnes også på Github her

Den faktiske testcasesfilen, det finnes et data-testid-element kalt dropzone i 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"]
        }
    }
}

Svar #1

Du har ikke importert disse variablene ennå fra din store.ts-fil "$loadedStore, $fileUploaded, $processed, $progressStore, $showConfig"

I utgangspunktet kan du legge dette i en store.ts slik.

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

Legg deretter til denne linjen øverst i App.svelte-filen din

// App.svelte

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