From e14e98efe6516a01d20ab50fccfa23a10b85a0cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?= Date: Fri, 9 Sep 2022 19:19:38 +0200 Subject: [PATCH 1/3] Improved readme --- 07-unit-testing/README.md | 74 +++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/07-unit-testing/README.md b/07-unit-testing/README.md index bf29b30..2f3698e 100644 --- a/07-unit-testing/README.md +++ b/07-unit-testing/README.md @@ -2,7 +2,7 @@ # Step By Step Guide -- This example will take a starting point _00-scratch-typescript_ +- This example will take a starting point _00-boiler-typescript_ - Let's install the packages. @@ -12,7 +12,7 @@ npm install - Let's create a plain vanilla function (no markup): -_./greet.business.ts_ +_./src/greet.business.ts_ ```ts export const greetSomebody = (dude: string): string => { @@ -22,7 +22,7 @@ export const greetSomebody = (dude: string): string => { - And let's create a simple component -_./greet.svelte_ +_./src/greet.svelte_ ```ts

Hello Human !

@@ -43,13 +43,13 @@ npm install -D vitest "build": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json", -+ "test": "npx vitest" ++ "test": "vitest" }, ``` - Let's add a simple test to our greet business function. -_./greet.business.spec.ts_ +_./src/greet.business.spec.ts_ ```ts import { greetSomebody } from "./greet.business"; @@ -72,7 +72,7 @@ npm install -D @types/jest _describe_ and _it_, let's ask vitest to use globals, let's update our vite config: -_./vite.config.js_ +_./vite.config.ts_ ```diff import { defineConfig } from 'vite' @@ -93,7 +93,7 @@ from the original one and extend it: > [More info](https://stackoverflow.com/questions/72146352/vitest-defineconfig-test-does-not-exist-in-type-userconfigexport) -_./vite.config.js_ +_./vite.config.ts_ ```diff import { defineConfig } from "vite"; @@ -139,8 +139,9 @@ _./package.json_ "build": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json", +- "test": "npx vitest" "test": "npx vitest", -+ "coverage": "npx vitest run --coverage" ++ "coverage": "vitest run --coverage" }, ``` @@ -197,19 +198,18 @@ npm install -D @testing-library/jest-dom jsdom _./vite.config.ts_ ```diff -const vitestConfig: VitestUserConfigInterface = { - test: { - globals: true, -+ environment: "jsdom", - }, - -}; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], - test: vitestConfig.test, -}); + const vitestConfig: VitestUserConfigInterface = { + test: { + globals: true, ++ environment: "jsdom", + }, + }; + + // https://vitejs.dev/config/ + export default defineConfig({ + plugins: [svelte()], + test: vitestConfig.test, + }); ``` - Let's run the tests again @@ -218,7 +218,7 @@ export default defineConfig({ npm run test ``` -- Hurra ! We got a new error! :-@: _Error: Invalid Chai property: toBeInTheDocument_ +- Hurray! We got a new error! :-@: _Error: Invalid Chai property: toBeInTheDocument_ We are using Jest matchers not chai, we need to add some extra config to get this working. @@ -234,22 +234,22 @@ import "@testing-library/jest-dom"; And let's indicate in our vite config that we are going to use this setup file: -_./vite.config.js_ +_./vite.config.ts_ ```diff -const vitestConfig: VitestUserConfigInterface = { - test: { - globals: true, - environment: "jsdom", -+ setupFiles: ["src/setuptest.ts"], - }, -}; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], - test: vitestConfig.test, -}); + const vitestConfig: VitestUserConfigInterface = { + test: { + globals: true, + environment: "jsdom", ++ setupFiles: ["src/setuptest.ts"], + }, + }; + + // https://vitejs.dev/config/ + export default defineConfig({ + plugins: [svelte()], + test: vitestConfig.test, + }); ``` And now we got it working (you can try changing the _hello human !_ literal @@ -280,7 +280,7 @@ import Greet from "./greet.svelte"; describe("greet component", () => { it("should render", () => { - render(Greet); -+ render(Greet, {name: 'John'}); ++ render(Greet, { name: "John" }); - const heading = screen.getByText("Hello Human !"); + const heading = screen.getByText("Hello John !"); From ac39349f6af331588af815285bb2d1ecfdf190d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?= Date: Sat, 24 Sep 2022 19:24:58 +0200 Subject: [PATCH 2/3] bump svelte version --- 07-unit-testing/package-lock.json | 14 +++++++------- 07-unit-testing/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/07-unit-testing/package-lock.json b/07-unit-testing/package-lock.json index 0e016ec..8e6302b 100644 --- a/07-unit-testing/package-lock.json +++ b/07-unit-testing/package-lock.json @@ -16,7 +16,7 @@ "@vitest/coverage-c8": "^0.22.1", "jsdom": "^20.0.0", "prettier-plugin-svelte": "^2.7.0", - "svelte": "^3.49.0", + "svelte": "^3.50.1", "svelte-check": "^2.8.0", "svelte-preprocess": "^4.10.7", "tslib": "^2.4.0", @@ -2906,9 +2906,9 @@ } }, "node_modules/svelte": { - "version": "3.49.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz", - "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==", + "version": "3.50.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", + "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==", "dev": true, "engines": { "node": ">= 8" @@ -5531,9 +5531,9 @@ "dev": true }, "svelte": { - "version": "3.49.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz", - "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==", + "version": "3.50.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", + "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==", "dev": true }, "svelte-check": { diff --git a/07-unit-testing/package.json b/07-unit-testing/package.json index 8fa84bf..161f34f 100644 --- a/07-unit-testing/package.json +++ b/07-unit-testing/package.json @@ -20,7 +20,7 @@ "@vitest/coverage-c8": "^0.22.1", "jsdom": "^20.0.0", "prettier-plugin-svelte": "^2.7.0", - "svelte": "^3.49.0", + "svelte": "^3.50.1", "svelte-check": "^2.8.0", "svelte-preprocess": "^4.10.7", "tslib": "^2.4.0", From e606c911c8f6ef3f4068c3f66b5ada88f0041a2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?= Date: Sat, 24 Sep 2022 19:27:27 +0200 Subject: [PATCH 3/3] Second revision --- 07-unit-testing/README.md | 53 +++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/07-unit-testing/README.md b/07-unit-testing/README.md index 2f3698e..b409b80 100644 --- a/07-unit-testing/README.md +++ b/07-unit-testing/README.md @@ -43,7 +43,7 @@ npm install -D vitest "build": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json", -+ "test": "vitest" ++ "test": "vitest" }, ``` @@ -75,16 +75,16 @@ npm install -D @types/jest _./vite.config.ts_ ```diff -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' + import { defineConfig } from 'vite' + import { svelte } from '@sveltejs/vite-plugin-svelte' -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], -+ test: { -+ globals: true, -+ } -}) + // https://vitejs.dev/config/ + export default defineConfig({ + plugins: [svelte()], ++ test: { ++ globals: true, ++ } + }) ``` We get TypeScript errors on the vite.config why? because test @@ -96,24 +96,24 @@ from the original one and extend it: _./vite.config.ts_ ```diff -import { defineConfig } from "vite"; -import { svelte } from "@sveltejs/vite-plugin-svelte"; + import { defineConfig } from "vite"; + import { svelte } from "@sveltejs/vite-plugin-svelte"; + import type { UserConfig as VitestUserConfigInterface } from 'vitest/config'; + const vitestConfig: VitestUserConfigInterface = { -+ test: { -+ globals: true -+ } -+}; ++ test: { ++ globals: true ++ } ++ }; -// https://vitejs.dev/config/ -export default defineConfig({ + // https://vitejs.dev/config/ + export default defineConfig({ plugins: [svelte()], -- test: { -- globals: true, -- } -+ test: vitestConfig.test +- test: { +- globals: true, +- } ++ test: vitestConfig.test }); ``` @@ -279,12 +279,11 @@ import Greet from "./greet.svelte"; describe("greet component", () => { it("should render", () => { -- render(Greet); -+ render(Greet, { name: "John" }); - -- const heading = screen.getByText("Hello Human !"); -+ const heading = screen.getByText("Hello John !"); +- render(Greet); ++ render(Greet, { name: "John" }); +- const heading = screen.getByText("Hello Human !"); ++ const heading = screen.getByText("Hello John !"); expect(heading).toBeInTheDocument(); });