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",