From bcadd19304278a262318fcbdb521520e71938cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Go=CC=88khan=20O=CC=88ztu=CC=88rk?= Date: Thu, 18 Aug 2022 17:19:13 +0300 Subject: [PATCH] feat: added the vitest configs --- env.d.ts | 6 ++++++ lib/main.ts | 3 +-- package.json | 12 +++++++----- src/components/Button/Button.spec.ts | 11 +++++++++++ .../Button/{Button.stories.js => Button.stories.ts} | 10 +++------- src/components/__tests__/HelloWorld.spec.ts | 11 ----------- tsconfig.json | 9 ++++++++- vite.config.ts | 3 +++ vitest.config.ts | 12 ++++++++++++ 9 files changed, 51 insertions(+), 26 deletions(-) create mode 100644 src/components/Button/Button.spec.ts rename src/components/Button/{Button.stories.js => Button.stories.ts} (75%) delete mode 100644 src/components/__tests__/HelloWorld.spec.ts create mode 100644 vitest.config.ts diff --git a/env.d.ts b/env.d.ts index 11f02fe..af36df3 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,7 @@ /// + +declare module '*.vue' { + import type { DefineComponent } from 'vue'; + const component: DefineComponent<{}, {}, any>; + export default component; +} diff --git a/lib/main.ts b/lib/main.ts index 7557dea..0c87c97 100644 --- a/lib/main.ts +++ b/lib/main.ts @@ -1,4 +1,3 @@ -import HelloWorld from '../src/components/HelloWorld.vue'; import Button from '../src/components/Button/Button.vue'; -export { HelloWorld, Button }; +export { Button }; diff --git a/package.json b/package.json index 5928de8..4fe0b02 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "test:unit": "vitest --environment jsdom", + "test:unit": "vitest", + "test:coverage": "vitest run --coverage", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", @@ -42,10 +43,11 @@ "@storybook/vue3": "^6.5.10", "@types/jsdom": "^20.0.0", "@types/node": "^16.11.48", - "@vitejs/plugin-vue": "^3.0.1", + "@vitejs/plugin-vue": "^3.0.3", + "@vitest/coverage-c8": "^0.22.1", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^11.0.0", - "@vue/test-utils": "^2.0.2", + "@vue/test-utils": "^2.0.0", "@vue/tsconfig": "^0.1.3", "autoprefixer": "^10.4.8", "babel-loader": "^8.2.5", @@ -62,8 +64,8 @@ "prettier": "^2.7.1", "tailwindcss": "^3.1.8", "typescript": "~4.7.4", - "vite": "^3.0.4", - "vitest": "^0.21.0", + "vite": "^3.0.8", + "vitest": "^0.22.1", "vue-loader": "^16.8.3", "vue-tsc": "^0.39.5" }, diff --git a/src/components/Button/Button.spec.ts b/src/components/Button/Button.spec.ts new file mode 100644 index 0000000..e507068 --- /dev/null +++ b/src/components/Button/Button.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest'; + +import { mount } from '@vue/test-utils'; +import Button from './Button.vue'; + +describe('Button', () => { + it('renders properly', () => { + const wrapper = mount(Button, { props: { label: 'Hello Vitest' } }); + expect(wrapper.text()).toContain('Hello Vitest'); + }); +}); diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.ts similarity index 75% rename from src/components/Button/Button.stories.js rename to src/components/Button/Button.stories.ts index 162499e..f88be60 100644 --- a/src/components/Button/Button.stories.js +++ b/src/components/Button/Button.stories.ts @@ -1,4 +1,5 @@ import MyButton from './Button.vue'; +import type { Meta, StoryFn } from '@storybook/vue3'; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { @@ -22,22 +23,17 @@ export default { icon: { control: 'text' }, onClick: {}, }, -}; +} as Meta; -// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args -const Template = (args) => ({ - // Components used in your story `template` are defined in the `components` object +const Template: StoryFn = (args) => ({ components: { MyButton }, - // The story's `args` need to be mapped into the template through the `setup()` method setup() { return { args }; }, - // And then the `args` are bound to your component with `v-bind="args"` template: '', }); export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/vue/writing-stories/args Primary.args = { role: 'primary', label: 'Primary Button', diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index 2533202..0000000 --- a/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { describe, it, expect } from 'vitest' - -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' - -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) diff --git a/tsconfig.json b/tsconfig.json index 31f9003..6c4a3c5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,5 +10,12 @@ { "path": "./tsconfig.vitest.json" } - ] + ], + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "moduleResolution": "node", + "jsx": "preserve", + "types": ["vitest/globals"] + } } diff --git a/vite.config.ts b/vite.config.ts index a4b3437..ca90f54 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -32,4 +32,7 @@ export default defineConfig({ }, }, }, + test: { + collectCoverage: true, + }, }); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..15e67c8 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,12 @@ +/// + +import { defineConfig } from 'vite'; +import Vue from '@vitejs/plugin-vue'; + +export default defineConfig({ + plugins: [Vue()], + test: { + globals: true, + environment: 'jsdom', + }, +});