From 155eda38d0882b150e8e9deec6ab49599bcc6d12 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Aug 2026 19:30:38 +0800 Subject: [PATCH 1/3] refactor(create-rslib): use Vue Test Utils in templates --- packages/create-rslib/template-vue-js/package.json | 7 +++---- .../create-rslib/template-vue-js/tests/index.test.js | 11 ++++++----- packages/create-rslib/template-vue-ts/package.json | 7 +++---- .../create-rslib/template-vue-ts/tests/index.test.ts | 11 ++++++----- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/create-rslib/template-vue-js/package.json b/packages/create-rslib/template-vue-js/package.json index f5fc42343f..da6a2fa782 100644 --- a/packages/create-rslib/template-vue-js/package.json +++ b/packages/create-rslib/template-vue-js/package.json @@ -12,9 +12,6 @@ "files": [ "dist" ], - "publishConfig": { - "access": "public" - }, "scripts": { "build": "rslib", "dev": "rslib --watch", @@ -27,12 +24,14 @@ "@rstest/adapter-rslib": "^0.11.6", "@rstest/core": "^0.11.6", "@testing-library/jest-dom": "^7.0.0", - "@testing-library/vue": "^8.1.0", "@vue/test-utils": "^2.4.11", "happy-dom": "^20.11.1", "vue": "^3.5.40" }, "peerDependencies": { "vue": "^3.2.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/create-rslib/template-vue-js/tests/index.test.js b/packages/create-rslib/template-vue-js/tests/index.test.js index 096747aa88..cd02b1f6c2 100644 --- a/packages/create-rslib/template-vue-js/tests/index.test.js +++ b/packages/create-rslib/template-vue-js/tests/index.test.js @@ -1,16 +1,17 @@ import { expect, test } from '@rstest/core'; -import { render, screen } from '@testing-library/vue'; +import { mount } from '@vue/test-utils'; import Button from '../src/Button.vue'; -test('The button should have correct background color', async () => { - render(Button, { +test('The button should have correct background color', () => { + const wrapper = mount(Button, { + attachTo: document.body, props: { backgroundColor: '#ccc', label: 'Demo Button', }, }); - const button = screen.getByText('Demo Button'); - expect(button).toHaveStyle({ + expect(wrapper.get('button').element).toHaveStyle({ backgroundColor: '#ccc', }); + wrapper.unmount(); }); diff --git a/packages/create-rslib/template-vue-ts/package.json b/packages/create-rslib/template-vue-ts/package.json index 55940b7cee..fa1a05c13b 100644 --- a/packages/create-rslib/template-vue-ts/package.json +++ b/packages/create-rslib/template-vue-ts/package.json @@ -12,9 +12,6 @@ "files": [ "dist" ], - "publishConfig": { - "access": "public" - }, "scripts": { "build": "rslib && vue-tsc", "dev": "rslib --watch", @@ -27,7 +24,6 @@ "@rstest/adapter-rslib": "^0.11.6", "@rstest/core": "^0.11.6", "@testing-library/jest-dom": "^7.0.0", - "@testing-library/vue": "^8.1.0", "@vue/test-utils": "^2.4.11", "happy-dom": "^20.11.1", "typescript": "^6.0.3", @@ -36,5 +32,8 @@ }, "peerDependencies": { "vue": "^3.2.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/create-rslib/template-vue-ts/tests/index.test.ts b/packages/create-rslib/template-vue-ts/tests/index.test.ts index 096747aa88..cd02b1f6c2 100644 --- a/packages/create-rslib/template-vue-ts/tests/index.test.ts +++ b/packages/create-rslib/template-vue-ts/tests/index.test.ts @@ -1,16 +1,17 @@ import { expect, test } from '@rstest/core'; -import { render, screen } from '@testing-library/vue'; +import { mount } from '@vue/test-utils'; import Button from '../src/Button.vue'; -test('The button should have correct background color', async () => { - render(Button, { +test('The button should have correct background color', () => { + const wrapper = mount(Button, { + attachTo: document.body, props: { backgroundColor: '#ccc', label: 'Demo Button', }, }); - const button = screen.getByText('Demo Button'); - expect(button).toHaveStyle({ + expect(wrapper.get('button').element).toHaveStyle({ backgroundColor: '#ccc', }); + wrapper.unmount(); }); From 96d062d70ab1e99fc1b427101e8222427a3ea30a Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Aug 2026 19:36:57 +0800 Subject: [PATCH 2/3] test(create-rslib): assert Vue template button label --- packages/create-rslib/template-vue-js/tests/index.test.js | 4 +++- packages/create-rslib/template-vue-ts/tests/index.test.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/create-rslib/template-vue-js/tests/index.test.js b/packages/create-rslib/template-vue-js/tests/index.test.js index cd02b1f6c2..717686ad2c 100644 --- a/packages/create-rslib/template-vue-js/tests/index.test.js +++ b/packages/create-rslib/template-vue-js/tests/index.test.js @@ -10,7 +10,9 @@ test('The button should have correct background color', () => { label: 'Demo Button', }, }); - expect(wrapper.get('button').element).toHaveStyle({ + const button = wrapper.get('button'); + expect(button.text()).toBe('Demo Button'); + expect(button.element).toHaveStyle({ backgroundColor: '#ccc', }); wrapper.unmount(); diff --git a/packages/create-rslib/template-vue-ts/tests/index.test.ts b/packages/create-rslib/template-vue-ts/tests/index.test.ts index cd02b1f6c2..717686ad2c 100644 --- a/packages/create-rslib/template-vue-ts/tests/index.test.ts +++ b/packages/create-rslib/template-vue-ts/tests/index.test.ts @@ -10,7 +10,9 @@ test('The button should have correct background color', () => { label: 'Demo Button', }, }); - expect(wrapper.get('button').element).toHaveStyle({ + const button = wrapper.get('button'); + expect(button.text()).toBe('Demo Button'); + expect(button.element).toHaveStyle({ backgroundColor: '#ccc', }); wrapper.unmount(); From 24d43c33dd46d7dffe49b00de55b70f97b944a73 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Aug 2026 19:43:49 +0800 Subject: [PATCH 3/3] test(create-rslib): auto-unmount Vue wrappers --- packages/create-rslib/template-vue-js/rstest.setup.js | 4 +++- packages/create-rslib/template-vue-js/tests/index.test.js | 1 - packages/create-rslib/template-vue-ts/rstest.setup.ts | 4 +++- packages/create-rslib/template-vue-ts/tests/index.test.ts | 1 - 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/create-rslib/template-vue-js/rstest.setup.js b/packages/create-rslib/template-vue-js/rstest.setup.js index 32b38ae281..1939e61d8a 100644 --- a/packages/create-rslib/template-vue-js/rstest.setup.js +++ b/packages/create-rslib/template-vue-js/rstest.setup.js @@ -1,4 +1,6 @@ -import { expect } from '@rstest/core'; +import { afterEach, expect } from '@rstest/core'; import * as jestDomMatchers from '@testing-library/jest-dom/matchers'; +import { enableAutoUnmount } from '@vue/test-utils'; expect.extend(jestDomMatchers); +enableAutoUnmount(afterEach); diff --git a/packages/create-rslib/template-vue-js/tests/index.test.js b/packages/create-rslib/template-vue-js/tests/index.test.js index 717686ad2c..0ea87f7896 100644 --- a/packages/create-rslib/template-vue-js/tests/index.test.js +++ b/packages/create-rslib/template-vue-js/tests/index.test.js @@ -15,5 +15,4 @@ test('The button should have correct background color', () => { expect(button.element).toHaveStyle({ backgroundColor: '#ccc', }); - wrapper.unmount(); }); diff --git a/packages/create-rslib/template-vue-ts/rstest.setup.ts b/packages/create-rslib/template-vue-ts/rstest.setup.ts index 32b38ae281..1939e61d8a 100644 --- a/packages/create-rslib/template-vue-ts/rstest.setup.ts +++ b/packages/create-rslib/template-vue-ts/rstest.setup.ts @@ -1,4 +1,6 @@ -import { expect } from '@rstest/core'; +import { afterEach, expect } from '@rstest/core'; import * as jestDomMatchers from '@testing-library/jest-dom/matchers'; +import { enableAutoUnmount } from '@vue/test-utils'; expect.extend(jestDomMatchers); +enableAutoUnmount(afterEach); diff --git a/packages/create-rslib/template-vue-ts/tests/index.test.ts b/packages/create-rslib/template-vue-ts/tests/index.test.ts index 717686ad2c..0ea87f7896 100644 --- a/packages/create-rslib/template-vue-ts/tests/index.test.ts +++ b/packages/create-rslib/template-vue-ts/tests/index.test.ts @@ -15,5 +15,4 @@ test('The button should have correct background color', () => { expect(button.element).toHaveStyle({ backgroundColor: '#ccc', }); - wrapper.unmount(); });