diff --git a/src/components/common/__tests__/VnJsonValue.spec.js b/src/components/common/__tests__/VnJsonValue.spec.js
index 19e563a1f..393b39f3a 100644
--- a/src/components/common/__tests__/VnJsonValue.spec.js
+++ b/src/components/common/__tests__/VnJsonValue.spec.js
@@ -1,37 +1,37 @@
-import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import VnJsonValue from 'src/components/common/VnJsonValue.vue';
+import { createWrapper } from 'app/test/vitest/helper';
 
-const createWrapper = (props) => {
-    return mount(VnJsonValue, {
+const buildComponent = (props) => {
+    return createWrapper(VnJsonValue, {
         props,
-    });
+    }).wrapper;
 };
 
 describe('VnJsonValue', () => {
     it('renders null value correctly', async () => {
-        const wrapper = createWrapper({ value: null });
+        const wrapper = buildComponent({ value: null });
         const span = wrapper.find('span');
         expect(span.text()).toBe('∅');
         expect(span.classes()).toContain('json-null');
     });
 
     it('renders boolean true correctly', async () => {
-        const wrapper = createWrapper({ value: true });
+        const wrapper = buildComponent({ value: true });
         const span = wrapper.find('span');
         expect(span.text()).toBe('✓');
         expect(span.classes()).toContain('json-true');
     });
 
     it('renders boolean false correctly', async () => {
-        const wrapper = createWrapper({ value: false });
+        const wrapper = buildComponent({ value: false });
         const span = wrapper.find('span');
         expect(span.text()).toBe('✗');
         expect(span.classes()).toContain('json-false');
     });
 
     it('renders a short string correctly', async () => {
-        const wrapper = createWrapper({ value: 'Hello' });
+        const wrapper = buildComponent({ value: 'Hello' });
         const span = wrapper.find('span');
         expect(span.text()).toBe('Hello');
         expect(span.classes()).toContain('json-string');
@@ -39,7 +39,7 @@ describe('VnJsonValue', () => {
 
     it('renders a long string correctly with ellipsis', async () => {
         const longString = 'a'.repeat(600);
-        const wrapper = createWrapper({ value: longString });
+        const wrapper = buildComponent({ value: longString });
         const span = wrapper.find('span');
         expect(span.text()).toContain('...');
         expect(span.text().length).toBeLessThanOrEqual(515);
@@ -48,14 +48,14 @@ describe('VnJsonValue', () => {
     });
 
     it('renders a number correctly', async () => {
-        const wrapper = createWrapper({ value: 123.4567 });
+        const wrapper = buildComponent({ value: 123.4567 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('123.457');
         expect(span.classes()).toContain('json-number');
     });
 
     it('renders an integer correctly', async () => {
-        const wrapper = createWrapper({ value: 42 });
+        const wrapper = buildComponent({ value: 42 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('42');
         expect(span.classes()).toContain('json-number');
@@ -63,7 +63,7 @@ describe('VnJsonValue', () => {
 
     it('renders a date correctly', async () => {
         const date = new Date('2023-01-01');
-        const wrapper = createWrapper({ value: date });
+        const wrapper = buildComponent({ value: date });
         const span = wrapper.find('span');
         expect(span.text()).toBe('2023-01-01');
         expect(span.classes()).toContain('json-object');
@@ -71,14 +71,22 @@ describe('VnJsonValue', () => {
 
     it('renders an object correctly', async () => {
         const obj = { key: 'value' };
-        const wrapper = createWrapper({ value: obj });
+        const wrapper = buildComponent({ value: obj });
         const span = wrapper.find('span');
         expect(span.text()).toBe(obj.toString());
         expect(span.classes()).toContain('json-object');
     });
 
+    it('renders an array correctly', async () => {
+        const arr = [1, 2, 3];
+        const wrapper = buildComponent({ value: arr });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe(arr.toString());
+        expect(span.classes()).toContain('json-object');
+    });
+
     it('updates value when prop changes', async () => {
-        const wrapper = createWrapper({ value: true });
+        const wrapper = buildComponent({ value: true });
         await wrapper.setProps({ value: 123 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('123');