diff --git a/tests/unit/imgix-component.spec.ts b/tests/unit/imgix-component.spec.ts
index 288cb01a..ad019f50 100644
--- a/tests/unit/imgix-component.spec.ts
+++ b/tests/unit/imgix-component.spec.ts
@@ -1,49 +1,54 @@
+import { createApp } from 'vue';
 import VueImgix, { IxImg } from '@/plugins/vue-imgix';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
-import Vue from 'vue';
+import { render, screen } from '@testing-library/vue';
+import _App from '../../src/App.vue';
 import {
   expectElementToHaveFixedSrcAndSrcSet,
   expectElementToHaveFluidSrcAndSrcSet,
 } from '../helpers/url-assert';
+
+const App = createApp(_App);
+
 describe('imgix component', () => {
   beforeAll(() => {
-    Vue.use(VueImgix, {
+    App.use(VueImgix, {
       domain: 'assets.imgix.net',
     });
   });
   it('an img should be rendered', () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        // TODO(luis): remove this when we have a better way of testing
+        dataTestId: 'img-rendering',
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering'));
+    expect(screen.getByTestId('img-rendering'));
   });
   it(`the rendered img's src should be set`, () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        dataTestId: 'img-rendering',
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'src',
       expect.stringMatching('examples/pione.jpg'),
     );
   });
   it(`the rendered img's srcset should be set correctly`, () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        dataTestId: 'img-rendering',
       },
     });
 
-    const srcset = wrapper.getByTestId('img-rendering').getAttribute('srcset');
+    const srcset = screen.getByTestId('img-rendering').getAttribute('srcset');
 
     expect(srcset).not.toBeFalsy();
     if (!srcset) {
@@ -59,19 +64,19 @@ describe('imgix component', () => {
   });
 
   it('imgixParams should be set on the rendered src and srcset', () => {
-    const wrapper = render(IxImg, {
-      propsData: {
-        'data-testid': 'img-rendering',
+    render(IxImg, {
+      props: {
+        dataTestId: 'img-rendering',
         src: 'examples/pione.jpg',
         imgixParams: { crop: 'faces' },
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'src',
       expect.stringMatching('crop=faces'),
     );
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'srcset',
       expect.stringMatching('crop=faces'),
     );
@@ -79,24 +84,24 @@ describe('imgix component', () => {
 
   describe('in fluid mode (no fixed props set)', () => {
     it('ix-img should render a fluid image if width is passed as attribute', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFluidSrcAndSrcSet(el);
     });
   });
 
   describe('in fixed mode (fixed prop set, or width/height passed to imgixParams)', () => {
     it('the src and srcset should be in fixed size mode when a width is passed to imgixParams', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           imgixParams: {
             w: 100,
@@ -104,13 +109,13 @@ describe('imgix component', () => {
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFixedSrcAndSrcSet(el, 100);
     });
     it('the src and srcset should be in fixed size mode when a fixed prop is passed to the element', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
           height: 150,
@@ -118,7 +123,7 @@ describe('imgix component', () => {
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFixedSrcAndSrcSet(el, 100);
 
       expect(el).toHaveAttribute('src', expect.stringMatching('h=150'));
@@ -126,29 +131,29 @@ describe('imgix component', () => {
     });
 
     it('a width attribute should be passed through to the underlying component', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
         },
       });
 
-      expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+      expect(screen.getByTestId('img-rendering')).toHaveAttribute(
         'width',
         '100',
       );
     });
     it('a height attribute should be passed through to the underlying component', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           height: 100,
         },
       });
 
-      expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+      expect(screen.getByTestId('img-rendering')).toHaveAttribute(
         'height',
         '100',
       );
@@ -159,9 +164,9 @@ describe('imgix component', () => {
     const ATTRIBUTES = ['src', 'srcset'];
     ATTRIBUTES.forEach((attribute) => {
       it(`${attribute} can be configured to use data-${attribute}`, () => {
-        const wrapper = render(IxImg, {
-          propsData: {
-            'data-testid': 'img-rendering',
+        render(IxImg, {
+          props: {
+            dataTestId: 'img-rendering',
             src: 'examples/pione.jpg',
             attributeConfig: {
               [attribute]: `data-${attribute}`,
@@ -169,11 +174,11 @@ describe('imgix component', () => {
           },
         });
 
-        expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+        expect(screen.getByTestId('img-rendering')).toHaveAttribute(
           `data-${attribute}`,
           expect.stringMatching(/ixlib/),
         );
-        expect(wrapper.getByTestId('img-rendering')).not.toHaveAttribute(
+        expect(screen.getByTestId('img-rendering')).not.toHaveAttribute(
           attribute,
         );
       });
@@ -197,14 +202,14 @@ describe('imgix component', () => {
       };
       const ImgixClient = require('@imgix/js-core');
       ImgixClient.mockImplementation(() => mockImgixClient);
-      _Vue.use(_VueImgix, {
+      App.use(_VueImgix, {
         domain: 'assets.imgix.net',
       });
       /* eslint-enable @typescript-eslint/no-var-requires */
     });
     it('should not pass disableVariableQuality: true to @imgix/js-core by default', () => {
       render(_IxImg, {
-        propsData: {
+        props: {
           src: 'examples/pione.jpg',
           height: 100,
           fixed: true,
@@ -221,7 +226,7 @@ describe('imgix component', () => {
     });
     it('should pass disableVariableQuality: true to @imgix/js-core when disableVariableQuality prop set', () => {
       render(_IxImg, {
-        propsData: {
+        props: {
           src: 'examples/pione.jpg',
           height: 100,
           disableVariableQuality: true,