1 files changed, 16 insertions, 18 deletions
diff --git a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
index 81c5cd6a057..de6ab43bc41 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
@@ -1,27 +1,25 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
+import { shallowMount } from '@vue/test-utils';
+import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
 
-describe('placeholder system note component', () => {
-  let PlaceholderSystemNote;
-  let vm;
+describe('Placeholder system note component', () => {
+  let wrapper;
 
-  beforeEach(() => {
-    PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
-  });
+  const createComponent = () => {
+    wrapper = shallowMount(PlaceholderSystemNote, {
+      propsData: {
+        note: { body: 'This is a placeholder' },
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('should render system note placeholder with plain text', () => {
-    vm = mountComponent(PlaceholderSystemNote, {
-      note: { body: 'This is a placeholder' },
-    });
+  it('matches snapshot', () => {
+    createComponent();
 
-    expect(vm.$el.tagName).toEqual('LI');
-    expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual(
-      'This is a placeholder',
-    );
+    expect(wrapper.element).toMatchSnapshot();
   });
 });