Fix/jest esm babel

.babelrc

@@ -1,12 +1,3 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": "current"
-        }
-      }
-    ]
-  ]
+  "plugins": ["babel-plugin-transform-vite-meta-env"]
 }

__tests__/unit/helpers/TestHarness.svelte

@@ -0,0 +1,16 @@
+<script>
+  import {setContext} from 'svelte';
+  import {writable} from 'svelte/store';
+
+  export let Component;
+
+  export let stores = {
+    page: writable({ path: '/' }),
+    navigating: writable(null),
+    session: writable(null),
+  };
+
+  setContext('__svelte__', stores);
+</script>
+
+<svelte:component this={Component} />

__tests__/unit/routes/checkout.js

@@ -1,46 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/svelte'
-import checkout from '$routes/checkout.svelte'
-
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/checkout'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
-describe('routes/checkout.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(checkout)
-    expect(getByText('Checkout')).toBeInTheDocument()
-  })
-})
+ import '@testing-library/jest-dom/extend-expect'
+ import { render } from '@testing-library/svelte'
+ import TestHarness from '../helpers/TestHarness.svelte'
+ import checkout from '$routes/checkout.svelte'
+
+ describe('routes/checkout.svelte', () => {
+
+   it.only('should render in test harness', async () => {
+     const { getByText } = render(TestHarness, { Component: checkout })
+     expect(getByText('Checkout')).toBeInTheDocument()
+   })
+ })
+

__tests__/unit/routes/downsell.js

@@ -1,46 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/svelte'
-import downsell from '$routes/downsell.svelte'
-
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/downsell'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
-describe('routes/downsell.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(downsell)
-    expect(getByText('Downsell')).toBeInTheDocument()
-  })
-})
+ import '@testing-library/jest-dom/extend-expect'
+ import { render } from '@testing-library/svelte'
+ import TestHarness from '../helpers/TestHarness.svelte'
+ import downsell from '$routes/downsell.svelte'
+
+ describe('routes/downsell.svelte', () => {
+
+   it.only('should render in test harness', async () => {
+     const { getByText } = render(TestHarness, { Component: downsell })
+     expect(getByText('Downsell')).toBeInTheDocument()
+   })
+ })
+

__tests__/unit/routes/index.js

@@ -3,44 +3,13 @@
  */
 import '@testing-library/jest-dom/extend-expect'
 import { render } from '@testing-library/svelte'
+import TestHarness from '../helpers/TestHarness.svelte'
 import index from '$routes/index.svelte'
 
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
 describe('routes/index.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(index)
+
+  it.only('should render in test harness', async () => {
+    const { getByText } = render(TestHarness, { Component: index })
     expect(getByText('Lead magnet')).toBeInTheDocument()
   })
 })

__tests__/unit/routes/oto.js

@@ -1,46 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/svelte'
-import oto from '$routes/oto.svelte'
-
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/oto'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
-describe('routes/oto.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(oto)
-    expect(getByText('One time offer!')).toBeInTheDocument()
-  })
-})
+ import '@testing-library/jest-dom/extend-expect'
+ import { render } from '@testing-library/svelte'
+ import TestHarness from '../helpers/TestHarness.svelte'
+ import oto from '$routes/oto.svelte'
+
+ describe('routes/oto.svelte', () => {
+
+   it.only('should render in test harness', async () => {
+     const { getByText } = render(TestHarness, { Component: oto })
+     expect(getByText('One time offer!')).toBeInTheDocument()
+   })
+ })
+

__tests__/unit/routes/thank-you.js

@@ -1,46 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/svelte'
-import thankyou from '$routes/thank-you.svelte'
-
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/thank-you'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
-describe('routes/thankyou.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(thankyou)
-    expect(getByText('Thanks!')).toBeInTheDocument()
-  })
-})
+ import '@testing-library/jest-dom/extend-expect'
+ import { render } from '@testing-library/svelte'
+ import TestHarness from '../helpers/TestHarness.svelte'
+ import thankyou from '$routes/thank-you.svelte'
+
+ describe('routes/thankyou.svelte', () => {
+
+   it.only('should render in test harness', async () => {
+     const { getByText } = render(TestHarness, { Component: thankyou })
+     expect(getByText('Thanks!')).toBeInTheDocument()
+   })
+ })
+

__tests__/unit/routes/upsell.js

@@ -1,46 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/svelte'
-import upsell from '$routes/upsell.svelte'
-
-jest.mock('$app/env.js', () => ({
-  amp: false,
-  browser: true,
-  dev: true,
-  mode: 'test'
-}))
-
-jest.mock('$app/navigation.js', () => ({
-  goto: jest.fn()
-}))
-
-jest.mock('svelte', () => {
-  const { writable } = require('svelte/store')
-  const actualSvelte = jest.requireActual('svelte')
-  const fakeGetContext = jest.fn((name) => {
-    if (name === '__svelte__') {
-      return fakeSvelteKitContext
-    }
-  })
-  const fakeSvelteKitContext = {
-    page: writable({
-      path: '/upsell'
-    }),
-    navigating: writable(false)
-  }
-
-  const mockedSvelteKit = {
-    ...actualSvelte,
-    getContext: fakeGetContext
-  }
-  return mockedSvelteKit
-})
-
-describe('routes/upsell.svelte', () => {
-  it('should compile', async () => {
-    const { getByText } = render(upsell)
-    expect(getByText('Upsell')).toBeInTheDocument()
-  })
-})
+ import '@testing-library/jest-dom/extend-expect'
+ import { render } from '@testing-library/svelte'
+ import TestHarness from '../helpers/TestHarness.svelte'
+ import upsell from '$routes/upsell.svelte'
+
+ describe('routes/upsell.svelte', () => {
+
+   it.only('should render in test harness', async () => {
+     const { getByText } = render(TestHarness, { Component: upsell })
+     expect(getByText('Upsell')).toBeInTheDocument()
+   })
+ })
+

jest.json

@@ -5,9 +5,10 @@
   "moduleDirectories": ["node_modules"],
   "transform": {
     "^.+\\.svelte$": "svelte-jester",
-    "^.+\\.(ts|tsx|js|jsx)$": ["esbuild-jest"]
+    "^.+\\.(ts|tsx|js|jsx)$": ["babel-jest"]
   },
   "moduleFileExtensions": ["js", "svelte"],
+  "extensionsToTreatAsEsm": [".ts", ".svelte"],
   "moduleNameMapper": {
     "^\\$app(.*)$": "<rootDir>/.svelte-kit/build/runtime/app$1",
     "^\\$lib(.*)$": "<rootDir>/src/lib$1",