Fixes test snapshots

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

assets/components.d.ts

@@ -4,8 +4,6 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
-    CilColumns: typeof import('~icons/cil/columns')['default']
     ContainerStat: typeof import('./components/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
@@ -15,16 +13,7 @@ declare module 'vue' {
     LogEventSource: typeof import('./components/LogEventSource.vue')['default']
     LogViewer: typeof import('./components/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
-    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
-    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
-    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
-    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
-    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
-    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
-    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
-    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
-    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
     PastTime: typeof import('./components/PastTime.vue')['default']
     RelativeTime: typeof import('./components/RelativeTime.vue')['default']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']

assets/components/LogEventSource.spec.ts

@@ -2,22 +2,23 @@ import { mount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
 // @ts-ignore
 import EventSource, { sources } from "eventsourcemock";
-import debounce from "lodash.debounce";
+// import debounce from "lodash.debounce";
 import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
 import { settings } from "../composables/settings";
 import { useSearchFilter } from "@/composables/search";
-import { mocked } from "jest-mock";
+import { vi, describe, expect, beforeEach, test, beforeAll, afterAll } from "vitest";
 import { computed, Ref } from "vue";
 
-jest.mock("lodash.debounce", () =>
-  jest.fn((fn) => {
+vi.mock("lodash.debounce", () => ({
+  __esModule: true,
+  default: vi.fn((fn) => {
     fn.cancel = () => {};
     return fn;
-  })
-);
+  }),
+}));
 
-jest.mock("@/stores/container", () => ({
+vi.mock("@/stores/container", () => ({
   __esModule: true,
   useContainerStore() {
     return {
@@ -28,22 +29,24 @@ jest.mock("@/stores/container", () => ({
   },
 }));
 
-jest.mock("@/stores/config", () => ({ base: "" }));
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "" },
+}));
 
+/**
+ * @vitest-environment jsdom
+ */
 describe("<LogEventSource />", () => {
   const search = useSearchFilter();
 
   beforeEach(() => {
-    // @ts-ignore
     global.EventSource = EventSource;
-    window.scrollTo = jest.fn();
-    global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      disconnect: jest.fn(),
+    window.scrollTo = vi.fn();
+    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
     }));
-
-    mocked(debounce).mockClear();
-    jest.resetModules();
   });
 
   function createLogEventSource(
@@ -58,7 +61,7 @@ describe("<LogEventSource />", () => {
     search.searchFilter.value = searchFilter;
     return mount(LogEventSource, {
       global: {
-        plugins: [createTestingPinia()],
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
         components: {
           LogViewer,
         },
@@ -102,12 +105,7 @@ describe("<LogEventSource />", () => {
     const { key, ...messageWithoutKey } = message;
 
     expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": "\\"This is a message.\\"",
-      }
-    `);
+    expect(messageWithoutKey).toMatchSnapshot();
   });
 
   test("should parse messages with loki's timestamp format", async () => {
@@ -119,12 +117,7 @@ describe("<LogEventSource />", () => {
     const { key, ...messageWithoutKey } = message;
 
     expect(key).toBe("2020-04-27T12:35:43.272974324+02:00");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2020-04-27T10:35:43.272Z,
-        "message": "xxxxx",
-      }
-    `);
+    expect(messageWithoutKey).toMatchSnapshot();
   });
 
   test("should pass messages to slot", async () => {
@@ -139,12 +132,7 @@ describe("<LogEventSource />", () => {
 
     expect(key).toBe("2019-06-12T10:55:42.459034602Z");
 
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": "\\"This is a message.\\"",
-      }
-    `);
+    expect(messageWithoutKey).toMatchSnapshot();
   });
 
   describe("render html correctly", () => {
@@ -172,11 +160,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">\\"This is a message.\\"</span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
     test("should render messages with color", async () => {
@@ -187,11 +171,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
     test("should render messages with html entities", async () => {
@@ -202,11 +182,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
     test("should render dates with 12 hour style", async () => {
@@ -217,11 +193,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\">today at 11:55:42 PM</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
     test("should render dates with 24 hour style", async () => {
@@ -232,11 +204,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\">today at 23:55:42</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
     test("should render messages with filter", async () => {
@@ -250,11 +218,7 @@ describe("<LogEventSource />", () => {
       });
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchInlineSnapshot(`
-        "<ul class=\\"events medium\\">
-          <li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
-        </ul>"
-      `);
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
   });
 });

assets/components/__snapshots__/LogEventSource.spec.ts.snap

@@ -1,12 +1,69 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`<LogEventSource /> renders correctly 1`] = `
-"<div class=\\"infinte-loader\\">
-  <div class=\\"spinner\\" style=\\"display: none;\\">
-    <div class=\\"bounce1\\"></div>
-    <div class=\\"bounce2\\"></div>
-    <div class=\\"bounce3\\"></div>
+exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 11:55:42 PM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 23:55:42</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">\\"This is a message.\\"</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > renders correctly 1`] = `
+"<div class=\\"infinte-loader\\" data-v-48dce4fc=\\"\\">
+  <div class=\\"spinner\\" data-v-48dce4fc=\\"\\" style=\\"display: none;\\">
+    <div class=\\"bounce1\\" data-v-48dce4fc=\\"\\"></div>
+    <div class=\\"bounce2\\" data-v-48dce4fc=\\"\\"></div>
+    <div class=\\"bounce3\\" data-v-48dce4fc=\\"\\"></div>
   </div>
 </div>
-<ul class=\\"events medium\\"></ul>"
+<ul class=\\"events medium\\" data-v-28f125ea=\\"\\"></ul>"
+`;
+
+exports[`<LogEventSource /> > should parse messages 1`] = `
+{
+  "date": 2019-06-12T10:55:42.459Z,
+  "message": "\\"This is a message.\\"",
+}
+`;
+
+exports[`<LogEventSource /> > should parse messages with loki's timestamp format 1`] = `
+{
+  "date": 2020-04-27T10:35:43.272Z,
+  "message": "xxxxx",
+}
+`;
+
+exports[`<LogEventSource /> > should pass messages to slot 1`] = `
+{
+  "date": 2019-06-12T10:55:42.459Z,
+  "message": "\\"This is a message.\\"",
+}
 `;

package.json

@@ -18,7 +18,7 @@
     "dev": "make fake_assets && npm-run-all -p watch:assets watch:server",
     "build": "vite build",
     "release": "release-it",
-    "test": "TZ=UTC jest",
+    "test": "TZ=UTC vitest",
     "postinstall": "husky install"
   },
   "dependencies": {
@@ -52,26 +52,23 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.16.8",
     "@pinia/testing": "^0.0.9",
     "@types/jest": "^27.4.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
     "@types/semver": "^7.3.9",
+    "@vitest/ui": "^0.0.141",
     "@vue/test-utils": "^2.0.0-rc.18",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
     "eventsourcemock": "^2.0.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
-    "jest-mock": "^27.4.6",
     "jest-serializer-vue": "^2.0.2",
+    "jsdom": "^19.0.0",
     "lint-staged": "^12.1.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "release-it": "^14.12.1",
-    "ts-jest": "^27.1.2",
-    "ts-node": "^10.4.0"
+    "ts-node": "^10.4.0",
+    "vitest": "^0.0.140"
   },
   "lint-staged": {
     "*.{js,vue,css}": [