Merge pull request cibernox#10 from cibernox/add-vitest

Add vitest

Author: cibernox

package-lock.json

@@ -5,23 +5,30 @@
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
+    "test": "vitest run",
+    "test:dev": "vitest dev",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
+    "@testing-library/svelte": "^3.0.3",
     "@types/cookie": "^0.4.1",
+    "autoprefixer": "^10.4.0",
+    "chai-dom": "^1.11.0",
+    "cssnano": "^5.0.14",
+    "jsdom": "^19.0.0",
+    "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.0",
     "svelte": "^3.45.0",
     "svelte-check": "^2.2.11",
     "svelte-preprocess": "^4.10.1",
+    "tailwindcss": "^3.0.11",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
-    "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.0",
-    "autoprefixer": "^10.4.0",
-    "cssnano": "^5.0.14",
-    "tailwindcss": "^3.0.11"
+    "vitest": "^0.0.138",
+    "vite-plugin-svelte-inline-compile": "^0.0.1"
   },
   "type": "module",
   "dependencies": {

package.json

@@ -1,7 +1,9 @@
 <script>
   export let background;
 </script>
-<div class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+<div 
+  data-testid="definition-entry"
+  class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
   <dt class="text-sm font-medium text-gray-500">
     <slot name="dt"/>
   </dt>

src/lib/DefinitionEntry.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { t } from "precompile-intl-runtime";
 	let translations = `{
 	"header": "Svelte Intl Precompile is {adjective}",
 	"posted-on": "Posted on {postDate, date, long}",

src/lib/Playground.svelte

@@ -2,6 +2,15 @@ import preprocess from 'svelte-preprocess';
 import netlify from '@sveltejs/adapter-netlify';
 import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";
 
+export const sveltekitViteConfig = {
+  plugins: [
+    precompileIntl('locales') // if your translations are defined in /locales/[lang].json
+  ],
+  ssr: {
+    external: ['@babel/core', 'babel-plugin-precompile-intl']
+  },
+}
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
@@ -16,14 +25,7 @@ const config = {
     adapter: netlify(),
     // hydrate the <div id="svelte"> element in src/app.html
     target: "#svelte",
-		vite: {
-			plugins: [
-				precompileIntl('locales') // if your translations are defined in /locales/[lang].json
-			],
-      ssr: {
-        external: ['@babel/core', 'babel-plugin-precompile-intl']
-      }
-		}
+		vite: sveltekitViteConfig
   },
 };
 

svelte.config.js

@@ -0,0 +1,15 @@
+import { cleanup, render } from '@testing-library/svelte'
+import DefinitionEntry from '$lib/DefinitionEntry.svelte';
+import svelte from 'svelte-inline-compile';
+
+describe('DefinitionEntry.svelte', () => {
+  // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
+  afterEach(() => cleanup())
+
+  it('renders a link with the given href', () => {
+    const { getByTestId } = render(svelte`
+      <DefinitionEntry background="gray"></DefinitionEntry>
+    `)
+    expect(getByTestId('definition-entry')).to.have.class('bg-gray-50');
+  });
+});

tests/DefinitionEntrt.test.js

@@ -0,0 +1,3 @@
+import chai from 'chai';
+import chaiDom from 'chai-dom';
+chai.use(chaiDom);

tests/setup.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { sveltekitViteConfig } from './svelte.config.js'
+import path from 'path';
+import svelteInlineCompile from 'vite-plugin-svelte-inline-compile';
+
+export default defineConfig({
+  ...sveltekitViteConfig,
+  plugins: [
+    svelte({ 
+      hot: !process.env.VITEST,
+      compilerOptions: { format: "cjs" }
+    }),
+    svelteInlineCompile(),
+  ],
+  test: {
+    global: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.js'],
+  },
+  resolve: {
+    alias: {
+      $lib: path.resolve('./src/lib'),
+    },
+  },  
+})