refactor(create-rstack): use Vue Test Utils in templates (#269)

Author: chenjiahan

packages/create-rstack/template-app-vue-js/package.json

@@ -20,7 +20,6 @@
   "devDependencies": {
     "@rsbuild/plugin-vue": "^2.0.1",
     "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/vue": "^8.1.0",
     "@vue/test-utils": "^2.4.11",
     "happy-dom": "^20.11.1",
     "rstack": "^0.3.5"

packages/create-rstack/template-app-vue-js/tests/index.test.js

@@ -1,8 +1,8 @@
 import { expect, test } from 'rstack/test';
-import { render, screen } from '@testing-library/vue';
+import { mount } from '@vue/test-utils';
 import App from '../src/App.vue';
 
 test('renders the main page', () => {
-  render(App);
-  expect(screen.getByText('Rstack with Vue')).toBeInTheDocument();
+  const wrapper = mount(App);
+  expect(wrapper.element).toHaveTextContent('Rstack with Vue');
 });

packages/create-rstack/template-app-vue-ts/package.json

@@ -20,7 +20,6 @@
   "devDependencies": {
     "@rsbuild/plugin-vue": "^2.0.1",
     "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/vue": "^8.1.0",
     "@types/node": "^24.13.3",
     "@vue/test-utils": "^2.4.11",
     "happy-dom": "^20.11.1",

packages/create-rstack/template-app-vue-ts/tests/index.test.ts

@@ -1,8 +1,8 @@
 import { expect, test } from 'rstack/test';
-import { render, screen } from '@testing-library/vue';
+import { mount } from '@vue/test-utils';
 import App from '../src/App.vue';
 
 test('renders the main page', () => {
-  render(App);
-  expect(screen.getByText('Rstack with Vue')).toBeInTheDocument();
+  const wrapper = mount(App);
+  expect(wrapper.element).toHaveTextContent('Rstack with Vue');
 });

packages/create-rstack/template-lib-vue-js/package.json

@@ -24,7 +24,6 @@
   "devDependencies": {
     "@rsbuild/plugin-vue": "^2.0.1",
     "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/vue": "^8.1.0",
     "@vue/test-utils": "^2.4.11",
     "happy-dom": "^20.11.1",
     "rstack": "^0.3.5",

packages/create-rstack/template-lib-vue-js/tests/index.test.js

@@ -1,16 +1,17 @@
 import { expect, test } from 'rstack/test';
-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();
 });

packages/create-rstack/template-lib-vue-ts/package.json

@@ -26,7 +26,6 @@
   "devDependencies": {
     "@rsbuild/plugin-vue": "^2.0.1",
     "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/vue": "^8.1.0",
     "@types/node": "^24.13.3",
     "@vue/test-utils": "^2.4.11",
     "happy-dom": "^20.11.1",

packages/create-rstack/template-lib-vue-ts/tests/index.test.ts

@@ -1,16 +1,17 @@
 import { expect, test } from 'rstack/test';
-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();
 });