diff --git a/07-unit-testing/README.md b/07-unit-testing/README.md index bf29b30..b409b80 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,19 +72,19 @@ 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' -import { svelte } from '@sveltejs/vite-plugin-svelte' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], -+ test: { -+ globals: true, -+ } -}) + import { defineConfig } from 'vite' + import { svelte } from '@sveltejs/vite-plugin-svelte' + + // https://vitejs.dev/config/ + export default defineConfig({ + plugins: [svelte()], ++ test: { ++ globals: true, ++ } + }) ``` We get TypeScript errors on the vite.config why? because test @@ -93,27 +93,27 @@ 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"; -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 }); ``` @@ -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 @@ -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(); }); 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",