Cypressi probleemid koos Vite raamistikuga

Joel Edenberg

Isiklikult olen suur Cypress testimise raamisiku fänn, kuna see võimaldab kirjutada teste ja saada ka kohest visuaalset tagasisidet, et mida test täpselt teeb. See võimaldab kiiresti aru saada, kui kusagil testis mõni probleem ning ka testide hilisem uuendamine on võrdlemisi lihtne. Hiljuti aga tekkis probleem Cypressi komponent testidega. Lokaalses arenduskeskkonnas kõik toimis ja testid jooksid alati edukalt läbi. Kuid järjepideva tarneneahela (CI/CD pipeline) jooksutamise ajal tekkisid testidega ootamatult probleemid. Mõned komponenttestid ei läinud isegi mitte käima ja viga tekkis juba testi ettevalmistuse sammus. Veateade viitas puuduvatele komponentidele, mille laadimine ebaõnnestus. Lähemal uurimisel selgus, et probleem oli seotud Vite raamistikuga.

Nimelt üritab Vite komponente laadida vajaduspõhiselt ja seega ei ole esmakordsel käivitamisel kõik komponendid kohe saadaval. Lokaalses arenduskeskkonnas ei ole see probleem, kuna teste on käivitatud juba korduvalt ja ka rakendus ise on ehk jooksnud. Tarneahela jooksutamisel aga kasutatakse alati täiesti puhast Docker'i konteinerit, kus puudub igasugune eelnev seis. Sellepärast see probleem ka seal avaldus. Lõpuks selgus, et Vite raamistik ei saa millegi pärast hästi aru, et milliseid komponente Cypressi testid tegelikult vajavad. Ja seega võibki juhtuda ei mõned komponendid jäävad testi käivituse hetkeks laadimata.

Lahendus oli cypress.config.ts faili täiendamine. Sinna tuli lisada warmup parameeter, millega saab Vite raamisikku instrueerida ettelaadima kõiki testidega seotud komponente:

  component: {
    ...
    devServer: {
      framework: "vue",
      bundler: "vite",
      viteConfig: async () => {
        const viteConfig = (await import("./vite.config.ts")).default;
        return {
          ...viteConfig,
          server: {
            ...viteConfig.server,
            warmup: {
              clientFiles: [
                "cypress/**/*.ts",
              ],
            },
          },
        };
      },
    },
  },