From d744890b3f2412a12263fbd5dd6c4de419d86119 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Wed, 7 Sep 2022 22:04:34 +0300 Subject: [PATCH] Migrate Svelte component to Vitest, update dependencies --- components/svelte/jest.config.js | 11 ++++---- components/svelte/package.json | 25 +++++++++---------- .../tests/api/20-rendering-from-api.test.ts | 16 ++++++++---- .../tests/api/30-changing-props.test.ts | 6 ++--- .../svelte/tests/iconify/10-basic.test.ts | 2 +- .../svelte/tests/iconify/10-empty.test.ts | 2 +- .../svelte/tests/offline/10-basic.test.ts | 2 +- components/svelte/vitest.config.mjs | 11 ++++++++ 8 files changed, 46 insertions(+), 29 deletions(-) create mode 100644 components/svelte/vitest.config.mjs diff --git a/components/svelte/jest.config.js b/components/svelte/jest.config.js index 9225688..3598f4e 100644 --- a/components/svelte/jest.config.js +++ b/components/svelte/jest.config.js @@ -3,13 +3,14 @@ module.exports = { verbose: true, transform: { '^.+\\.svelte$': 'svelte-jester', + '^.+\\.ts$': [ + 'ts-jest', + { + tsconfig: 'tests/tsconfig.json', + }, + ], }, preset: 'ts-jest', testEnvironment: 'node', testMatch: ['**/tests/**/*.test.ts'], - globals: { - 'ts-jest': { - tsconfig: 'tests/tsconfig.json', - }, - }, }; diff --git a/components/svelte/package.json b/components/svelte/package.json index 1102302..28a5052 100644 --- a/components/svelte/package.json +++ b/components/svelte/package.json @@ -23,7 +23,7 @@ "build:tsc": "tsc -b", "build:bundles": "rollup -c rollup.config.js", "build:api": "node build --only-api", - "test": "jest --runInBand" + "test": "vitest" }, "dependencies": { "@iconify/types": "workspace:^" @@ -31,22 +31,21 @@ "devDependencies": { "@iconify/core": "workspace:^", "@iconify/utils": "workspace:^", - "@microsoft/api-extractor": "^7.25.2", - "@rollup/plugin-node-resolve": "^13.3.0", - "@rollup/plugin-typescript": "^8.3.3", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/svelte": "^3.1.3", + "@microsoft/api-extractor": "^7.30.0", + "@rollup/plugin-node-resolve": "^14.0.0", + "@rollup/plugin-typescript": "^8.5.0", + "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/svelte": "^3.2.1", "@tsconfig/svelte": "^3.0.0", - "@types/jest": "^27.5.2", - "jest": "^28.1.1", - "jest-environment-jsdom": "^28.1.1", + "@types/jest": "^29.0.0", + "@types/node": "^18.7.15", "rimraf": "^3.0.2", - "rollup": "^2.75.6", + "rollup": "^2.79.0", "rollup-plugin-svelte": "^7.1.0", - "svelte": "3.39", - "svelte-jester": "^2.3.2", + "svelte": "3.50.0", "svelte-preprocess": "^4.10.7", - "ts-jest": "28.0.0-next.3" + "vitest": "^0.23.1" }, "peerDependencies": { "svelte": ">=3" diff --git a/components/svelte/tests/api/20-rendering-from-api.test.ts b/components/svelte/tests/api/20-rendering-from-api.test.ts index c4f6147..1bd83c4 100644 --- a/components/svelte/tests/api/20-rendering-from-api.test.ts +++ b/components/svelte/tests/api/20-rendering-from-api.test.ts @@ -143,7 +143,7 @@ describe('Rendering icon', () => { // Should render empty icon const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); // onLoad should not have been called yet expect(onLoadCalled).toBe(false); @@ -173,17 +173,23 @@ describe('Rendering icon', () => { tick() .then(() => { const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe( + '
' + ); return tick(); }) .then(() => { const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe( + '
' + ); return tick(); }) .then(() => { const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe( + '
' + ); done(); }) .catch(done); @@ -203,6 +209,6 @@ describe('Rendering icon', () => { // Should render empty icon const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); }); }); diff --git a/components/svelte/tests/api/30-changing-props.test.ts b/components/svelte/tests/api/30-changing-props.test.ts index 26ad86c..601c8bf 100644 --- a/components/svelte/tests/api/30-changing-props.test.ts +++ b/components/svelte/tests/api/30-changing-props.test.ts @@ -158,7 +158,7 @@ describe('Rendering icon', () => { // Should render empty icon const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); // onLoad should not have been called yet expect(onLoadCalled).toBe(''); @@ -259,7 +259,7 @@ describe('Rendering icon', () => { // Should render empty icon const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); // Fixture callback should have been called expect(typeof triggerSwap).toBe('function'); @@ -363,7 +363,7 @@ describe('Rendering icon', () => { // Should render empty icon const html = component.container.innerHTML; - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); // onLoad should not have been called yet expect(onLoadCalled).toBe(false); diff --git a/components/svelte/tests/iconify/10-basic.test.ts b/components/svelte/tests/iconify/10-basic.test.ts index fb65872..959e2cd 100644 --- a/components/svelte/tests/iconify/10-basic.test.ts +++ b/components/svelte/tests/iconify/10-basic.test.ts @@ -25,7 +25,7 @@ describe('Creating component', () => { const html = (node.parentNode as HTMLDivElement).innerHTML; // Check HTML - expect(html).toBe( + expect(html.replace(//gm, '')).toBe( '' ); diff --git a/components/svelte/tests/iconify/10-empty.test.ts b/components/svelte/tests/iconify/10-empty.test.ts index 2cd65ca..c388c9d 100644 --- a/components/svelte/tests/iconify/10-empty.test.ts +++ b/components/svelte/tests/iconify/10-empty.test.ts @@ -10,6 +10,6 @@ describe('Empty icon', () => { const html = component.container.innerHTML; // Empty container div - expect(html).toBe('
'); + expect(html.replace(//gm, '')).toBe('
'); }); }); diff --git a/components/svelte/tests/offline/10-basic.test.ts b/components/svelte/tests/offline/10-basic.test.ts index 82d9503..3b189ab 100644 --- a/components/svelte/tests/offline/10-basic.test.ts +++ b/components/svelte/tests/offline/10-basic.test.ts @@ -19,7 +19,7 @@ describe('Creating component', () => { const html = (node.parentNode as HTMLDivElement).innerHTML; // Check HTML - expect(html).toBe( + expect(html.replace(//gm, '')).toBe( '' ); diff --git a/components/svelte/vitest.config.mjs b/components/svelte/vitest.config.mjs new file mode 100644 index 0000000..f7a0490 --- /dev/null +++ b/components/svelte/vitest.config.mjs @@ -0,0 +1,11 @@ +import { defineConfig } from 'vitest/config'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +export default defineConfig({ + plugins: [svelte()], + test: { + globals: true, + watch: false, + include: ['**/tests/**/*.test.ts'], + }, +});