Skip to content

Commit

Permalink
feat: jest 27 + svelte jester 2 and refactors to support that
Browse files Browse the repository at this point in the history
* fix: svelte-jester@2 + jest@27

Signed-off-by: Patrick Lee Scott <pat@patscott.io>

* fix: configure extensionsToTreatAsEsm, experimental-vm-modules, and rm esbuild-jest

Signed-off-by: Patrick Lee Scott <pat@patscott.io>

* fix: use babel for babel-plugin-transform-vite-meta-env

Signed-off-by: Patrick Lee Scott <pat@patscott.io>

* feat: TestHarness for sveltekit testing

Signed-off-by: Patrick Lee Scott <pat@patscott.io>

* fix: upgrade + cleanup deps

Signed-off-by: Patrick Lee Scott <pat@patscott.io>
  • Loading branch information
patrickleet committed Sep 7, 2021
1 parent 715e4e3 commit 1b38af0
Show file tree
Hide file tree
Showing 11 changed files with 9,120 additions and 8,196 deletions.
11 changes: 1 addition & 10 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
"plugins": ["babel-plugin-transform-vite-meta-env"]
}
16 changes: 16 additions & 0 deletions __tests__/unit/helpers/TestHarness.svelte
Original file line number Diff line number Diff line change
@@ -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} />
56 changes: 13 additions & 43 deletions __tests__/unit/routes/checkout.js
Original file line number Diff line number Diff line change
@@ -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()
})
})

56 changes: 13 additions & 43 deletions __tests__/unit/routes/downsell.js
Original file line number Diff line number Diff line change
@@ -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()
})
})

39 changes: 4 additions & 35 deletions __tests__/unit/routes/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})
56 changes: 13 additions & 43 deletions __tests__/unit/routes/oto.js
Original file line number Diff line number Diff line change
@@ -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()
})
})

56 changes: 13 additions & 43 deletions __tests__/unit/routes/thank-you.js
Original file line number Diff line number Diff line change
@@ -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()
})
})

56 changes: 13 additions & 43 deletions __tests__/unit/routes/upsell.js
Original file line number Diff line number Diff line change
@@ -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()
})
})

3 changes: 2 additions & 1 deletion jest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit 1b38af0

Please sign in to comment.