Skip to content

Commit 3776077

Browse files
yanickyanick
committed
move the module to be esm
To do that I've also switched jest for vitest **NOTE** I'm soon going to be potentially without Internet connection. I don't want to merge this and just walk away, so I'll need some :+1: and backup peeps on this one.
1 parent 52dd599 commit 3776077

14 files changed

+283
-210
lines changed

‎package.json

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"name": "@testing-library/svelte",
33
"version": "0.0.0-semantically-released",
44
"description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
5-
"main": "dist/index.js",
5+
"main": "src/index.js",
6+
"type": "module",
67
"types": "types/index.d.ts",
78
"license": "MIT",
89
"homepage": "https://github.com/testing-library/svelte-testing-library#readme",
@@ -29,21 +30,18 @@
2930
"e2e"
3031
],
3132
"files": [
32-
"dist",
3333
"dont-cleanup-after-each.js",
3434
"pure.js",
3535
"types/index.d.ts"
3636
],
3737
"scripts": {
3838
"toc": "doctoc README.md",
3939
"lint": "eslint src --fix",
40-
"clean": "rimraf dist",
41-
"build": "npm run clean && babel src --out-dir dist --ignore '**/__tests__/**'",
4240
"test": "jest src",
4341
"test:watch": "npm run test -- --watch",
4442
"test:update": "npm run test -- --updateSnapshot --coverage",
4543
"setup": "npm install && npm run validate",
46-
"validate": "npm run clean && npm-run-all lint test build",
44+
"validate": "npm run clean && npm-run-all lint test",
4745
"contributors:add": "all-contributors add",
4846
"contributors:generate": "all-contributors generate"
4947
},
@@ -54,17 +52,13 @@
5452
"@testing-library/dom": "^8.1.0"
5553
},
5654
"devDependencies": {
57-
"@babel/cli": "^7.6.2",
58-
"@babel/core": "^7.6.2",
59-
"@babel/plugin-transform-modules-commonjs": "^7.6.0",
60-
"@babel/preset-env": "^7.6.2",
6155
"@commitlint/cli": "^13.1.0",
6256
"@commitlint/config-conventional": "^13.1.0",
57+
"@sveltejs/vite-plugin-svelte": "^2.4.1",
6358
"@testing-library/jest-dom": "^5.0.2",
6459
"@types/jest": "^27.0.0",
60+
"@vitest/coverage-c8": "^0.32.0",
6561
"all-contributors-cli": "^6.9.0",
66-
"babel-eslint": "^10.0.3",
67-
"babel-jest": "^27.0.6",
6862
"doctoc": "^2.0.0",
6963
"eslint": "^7.2.0",
7064
"eslint-config-standard": "^16.0.0",
@@ -74,12 +68,15 @@
7468
"eslint-plugin-simple-import-sort": "^7.0.0",
7569
"eslint-plugin-svelte3": "^3.0.0",
7670
"husky": "^7.0.1",
77-
"jest": "^27.0.0",
71+
"jest": "^29.5.0",
72+
"jest-environment-jsdom": "^29.5.0",
7873
"lint-staged": "^11.1.1",
7974
"npm-run-all": "^4.1.5",
8075
"prettier": "^2.0.1",
81-
"svelte": "^3.0.0",
82-
"svelte-jester": "^2.1.4"
76+
"svelte": "^3.59.1",
77+
"svelte-jester": "^2.1.4",
78+
"vite": "^4.3.9",
79+
"vitest": "^0.32.0"
8380
},
8481
"husky": {
8582
"hooks": {
@@ -120,7 +117,6 @@
120117
],
121118
"testEnvironment": "jsdom",
122119
"transform": {
123-
"^.+\\.js$": "babel-jest",
124120
"^.+\\.svelte$": "svelte-jester",
125121
"^.+\\.html$": "svelte-jester"
126122
},

‎src/__tests__/__snapshots__/render.test.js.snap

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
1-
// Jest Snapshot v1, https://goo.gl/fbAQLP
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`render > should accept svelte component options 1`] = `
4+
<body>
5+
<div>
6+
<h1
7+
data-testid="test"
8+
>
9+
Hello
10+
World
11+
!
12+
</h1>
13+
14+
<div>
15+
we have context
16+
</div>
17+
18+
<button>
19+
Button
20+
</button>
21+
<!--&lt;Comp&gt;-->
22+
<div />
23+
</div>
24+
</body>
25+
`;
226

327
exports[`render should accept svelte component options 1`] = `
428
<body>

‎src/__tests__/auto-cleanup.test.js

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
1+
import { describe, test, expect } from 'vitest'
12
import { render } from '..'
2-
import Comp from './fixtures/Comp'
3+
import Comp from './fixtures/Comp.svelte'
34

45
describe('auto-cleanup', () => {
5-
// This just verifies that by importing STL in an
6-
// environment which supports afterEach (like jest)
7-
// we'll get automatic cleanup between tests.
8-
test('first', () => {
9-
render(Comp, { props: { name: 'world' } })
10-
})
6+
// This just verifies that by importing STL in an
7+
// environment which supports afterEach (like jest)
8+
// we'll get automatic cleanup between tests.
9+
test('first', () => {
10+
render(Comp, { props: { name: 'world' } })
11+
})
1112

12-
test('second', () => {
13-
expect(document.body.innerHTML).toEqual('')
14-
})
13+
test('second', () => {
14+
expect(document.body.innerHTML).toEqual('')
15+
})
1516
})
1617

1718
describe('cleanup of two components', () => {
18-
// This just verifies that by importing STL in an
19-
// environment which supports afterEach (like jest)
20-
// we'll get automatic cleanup between tests.
21-
test('first', () => {
22-
render(Comp, { props: { name: 'world' } })
23-
render(Comp, { props: { name: 'universe' } })
24-
})
19+
// This just verifies that by importing STL in an
20+
// environment which supports afterEach (like jest)
21+
// we'll get automatic cleanup between tests.
22+
test('first', () => {
23+
render(Comp, { props: { name: 'world' } })
24+
render(Comp, { props: { name: 'universe' } })
25+
})
2526

26-
test('second', () => {
27-
expect(document.body.innerHTML).toEqual('')
28-
})
27+
test('second', () => {
28+
expect(document.body.innerHTML).toEqual('')
29+
})
2930
})

‎src/__tests__/debug.test.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1+
import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest'
12
import { prettyDOM } from '@testing-library/dom'
23

34
import { render } from '..'
4-
import Comp from './fixtures/Comp'
5+
import Comp from './fixtures/Comp.svelte'
56

67
describe('debug', () => {
7-
beforeEach(() => {
8-
jest.spyOn(console, 'log').mockImplementation(() => {})
9-
})
8+
beforeEach(() => {
9+
vi.spyOn(console, 'log').mockImplementation(() => { })
10+
})
1011

11-
afterEach(() => {
12-
console.log.mockRestore()
13-
})
12+
afterEach(() => {
13+
console.log.mockRestore()
14+
})
1415

15-
test('pretty prints the container', () => {
16-
const { container, debug } = render(Comp, { props: { name: 'world' } })
16+
test('pretty prints the container', () => {
17+
const { container, debug } = render(Comp, { props: { name: 'world' } })
1718

18-
debug()
19+
debug()
1920

20-
expect(console.log).toHaveBeenCalledTimes(1)
21-
expect(console.log).toHaveBeenCalledWith(prettyDOM(container))
22-
})
21+
expect(console.log).toHaveBeenCalledTimes(1)
22+
expect(console.log).toHaveBeenCalledWith(prettyDOM(container))
23+
})
2324
})

‎src/__tests__/events.test.js

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1+
import { describe, test, expect } from 'vitest'
12
import { fireEvent, render } from '..'
2-
import Comp from './fixtures/Comp'
3+
import Comp from './fixtures/Comp.svelte'
34

45
describe('events', () => {
5-
test('state changes are flushed after firing an event', async () => {
6-
const { getByText } = render(Comp, { props: { name: 'World' } })
7-
const button = getByText('Button')
6+
test('state changes are flushed after firing an event', async () => {
7+
const { getByText } = render(Comp, { props: { name: 'World' } })
8+
const button = getByText('Button')
89

9-
await fireEvent.click(button)
10+
await fireEvent.click(button)
1011

11-
expect(button).toHaveTextContent('Button Clicked')
12-
})
12+
expect(button).toHaveTextContent('Button Clicked')
13+
})
1314

14-
test('calling `fireEvent` directly works too', async () => {
15-
const { getByText } = render(Comp, { props: { name: 'World' } })
16-
const button = getByText('Button')
15+
test('calling `fireEvent` directly works too', async () => {
16+
const { getByText } = render(Comp, { props: { name: 'World' } })
17+
const button = getByText('Button')
1718

18-
await fireEvent(
19-
button,
20-
new MouseEvent('click', {
21-
bubbles: true,
22-
cancelable: true
23-
})
24-
)
19+
await fireEvent(
20+
button,
21+
new MouseEvent('click', {
22+
bubbles: true,
23+
cancelable: true,
24+
})
25+
)
2526

26-
expect(button).toHaveTextContent('Button Clicked')
27-
})
27+
expect(button).toHaveTextContent('Button Clicked')
28+
})
2829
})

‎src/__tests__/fixtures/Comp.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<svelte:options accessors />
2+
13
<script>
24
import { getContext } from 'svelte'
35
@@ -7,15 +9,15 @@
79
810
const contextName = getContext('name')
911
10-
function handleClick () {
12+
function handleClick() {
1113
buttonText = 'Button Clicked'
1214
}
1315
</script>
1416

15-
<style></style>
16-
1717
<h1 data-testid="test">Hello {name}!</h1>
1818

1919
<div>we have {contextName}</div>
2020

2121
<button on:click={handleClick}>{buttonText}</button>
22+
23+
<style></style>

‎src/__tests__/fixtures/Comp.html renamed to ‎src/__tests__/fixtures/Comp2.svelte

File renamed without changes.

‎src/__tests__/multi-base.test.js

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
1+
import { describe, test, expect } from 'vitest'
12
import { render } from '..'
2-
import Comp from './fixtures/Comp'
3+
import Comp from './fixtures/Comp.svelte'
34

45
describe('multi-base', () => {
5-
const treeA = document.createElement('div')
6-
const treeB = document.createElement('div')
6+
const treeA = document.createElement('div')
7+
const treeB = document.createElement('div')
78

8-
test('container isolates trees from one another', () => {
9-
const { getByText: getByTextInA } = render(Comp, {
10-
target: treeA,
11-
props: {
12-
name: 'Tree A'
13-
}
14-
}, {
15-
container: treeA
16-
})
9+
test('container isolates trees from one another', () => {
10+
const { getByText: getByTextInA } = render(
11+
Comp,
12+
{
13+
target: treeA,
14+
props: {
15+
name: 'Tree A',
16+
},
17+
},
18+
{
19+
container: treeA,
20+
}
21+
)
1722

18-
const { getByText: getByTextInB } = render(Comp, {
19-
target: treeB,
20-
props: {
21-
name: 'Tree B'
22-
}
23-
}, {
24-
container: treeB
25-
})
23+
const { getByText: getByTextInB } = render(
24+
Comp,
25+
{
26+
target: treeB,
27+
props: {
28+
name: 'Tree B',
29+
},
30+
},
31+
{
32+
container: treeB,
33+
}
34+
)
2635

27-
expect(() => getByTextInA('Hello Tree A!')).not.toThrow()
28-
expect(() => getByTextInB('Hello Tree A!')).toThrow()
29-
expect(() => getByTextInA('Hello Tree B!')).toThrow()
30-
expect(() => getByTextInB('Hello Tree B!')).not.toThrow()
31-
})
36+
expect(() => getByTextInA('Hello Tree A!')).not.toThrow()
37+
expect(() => getByTextInB('Hello Tree A!')).toThrow()
38+
expect(() => getByTextInA('Hello Tree B!')).toThrow()
39+
expect(() => getByTextInB('Hello Tree B!')).not.toThrow()
40+
})
3241
})

0 commit comments

Comments
 (0)