@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/FormElements/CustomTags/CustomTags.spec.tsx

@@ -1,98 +1,91 @@
-import { mount, ReactWrapper, shallow } from 'enzyme';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { config } from 'react-transition-group';
+import { describe, expect, it, vi } from 'vitest';
 import { wait } from '../../../helpers/storybook';
-import { Button } from '../../Buttons';
 import { CustomTags } from './CustomTags';
 
 describe('CustomTags', () => {
   // Disable Animations for testing
   config.disabled = true;
 
-  const getTagsFromDOM = (wrapper: ReactWrapper): string[] =>
-    wrapper.find('span > span').map((node) => node.text());
-  const getTagsFromShallowDOM = (wrapper: ReactWrapper): string[] =>
-    wrapper.find('span > span').map((node) => node.text());
+  const getTagsFromDOM = (container: HTMLElement): string[] => {
+    const tags = container.querySelectorAll('span > span');
+    return Array.from(tags).map((node) => node.textContent || '');
+  };
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<CustomTags name={'test-name'} />);
+    const { container } = render(<CustomTags name={'test-name'} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(
+    const { container } = render(
       <CustomTags name={'test-name'} label={mockLabel} />,
     );
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it(`each Button component should have type of 'button'`, () => {
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags name={'test-name'} value={mockCurrentTags} />,
     );
 
-    const buttons = wrapper.find(Button);
+    const buttons = container.querySelectorAll('button');
 
     buttons.forEach((button) => {
-      expect(button.prop('type')).toBe('button');
+      expect((button as HTMLButtonElement).type).toBe('button');
     });
   });
 
   it('should render one plus button', () => {
-    const wrapper = mount(<CustomTags name="test-name" />);
-    const plusButton = wrapper
-      .find({
-        className: 'plusButton',
-        type: 'button',
-      })
-      .first();
-
-    expect(plusButton).toHaveLength(1);
+    const { container } = render(<CustomTags name="test-name" />);
+    const plusButton = container.querySelector('.plusButton');
+
+    expect(plusButton).toBeInTheDocument();
   });
 
   it('should disable plus button if there is no value in input field', () => {
-    const wrapper = mount(<CustomTags name="test-name" />);
-    const plusButton = wrapper
-      .find({
-        className: 'plusButton',
-        type: 'button',
-      })
-      .first();
-    expect(plusButton.prop('disabled')).toBeTruthy();
+    const { container } = render(<CustomTags name="test-name" />);
+    const plusButton = container.querySelector(
+      '.plusButton',
+    ) as HTMLButtonElement;
+
+    expect(plusButton.disabled).toBeTruthy();
   });
 
   it('displays a tag for each currently selected tag', () => {
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags name={'test-name'} value={mockCurrentTags} />,
     );
 
-    const tags = wrapper.find('span > span').map((node) => node.text());
+    const tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
     expect(tags).toEqual(mockCurrentTags);
   });
 
   it(`input attribute 'autocomplete' should be set to 'off'`, () => {
-    const wrapper = shallow(<CustomTags name={'test-name'} />);
+    const { container } = render(<CustomTags name={'test-name'} />);
 
-    const inputAutoComplete = wrapper.find('input').prop('autoComplete');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(inputAutoComplete).toBe('off');
+    expect(input.autocomplete).toBe('off');
   });
 
   it('raises onChange when the "Enter" key is pressed with the new value, updates custom tags with entered tag, and resets input value', async () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '4';
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -100,42 +93,30 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: mockTag } });
+
     await act(async () => {
-      await input.prop('onKeyDown')?.({
-        key: 'Enter',
-        //@ts-expect-error we're not passing the full EventTarget
-        currentTarget: { value: mockTag },
-        persist: () => jest.fn(),
-        preventDefault: () => jest.fn(),
-      });
-      wrapper.update();
+      fireEvent.keyDown(input, { key: 'Enter' });
     });
 
-    tags = getTagsFromDOM(wrapper);
+    tags = getTagsFromDOM(container);
     expect(tags).toEqual([...mockCurrentTags, mockTag]);
     expect(tags).toHaveLength(4);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(input.prop('value')).toBe('');
-    // TODO refactor this when onChange is changed to emit value and not currentTarget object and look for other onChangeSpy
-    // Test is only failing due to a bug with jasmine: https://github.com/jasmine/jasmine/issues/652
-    // Objects do match, commenting it out for now.
-    // expect(spy).toHaveBeenCalledWith({
-    //   currentTarget: { value: [...mockCurrentTags, mockTag] },
-    //   key: 'Enter',
-    //   persist: () => jest.fn(),
-    // });
+    expect(input.value).toBe('');
   });
 
   it('raises onChange when the "+" button is pressed with the new value, updates custom tags with entered tag, and resets input value', async () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '4';
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -143,37 +124,30 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    const attribute = document.createAttribute('value');
-    attribute.value = mockTag;
-    input.getDOMNode().setAttributeNode(attribute);
-    input.simulate('change');
-    wrapper.update();
+    fireEvent.change(input, { target: { value: mockTag } });
 
-    const plusButton = wrapper
-      .find({
-        className: 'plusButton',
-        type: 'button',
-      })
-      .first();
-    plusButton.simulate('click');
+    const plusButton = container.querySelector(
+      '.plusButton',
+    ) as HTMLButtonElement;
+    fireEvent.click(plusButton);
 
-    tags = getTagsFromDOM(wrapper);
+    tags = getTagsFromDOM(container);
     expect(tags).toEqual([...mockCurrentTags, mockTag]);
     expect(tags).toHaveLength(4);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(input.prop('value')).toBe('');
+    expect(input.value).toBe('');
   });
 
   it('raises onChange when removing a tag along with the new value', async () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -181,22 +155,22 @@ describe('CustomTags', () => {
       />,
     );
 
-    const x = wrapper.find('svg').last();
+    const removeButtons = container.querySelectorAll('svg');
+    const lastRemoveButton = removeButtons[
+      removeButtons.length - 1
+    ] as SVGElement;
 
     await act(async () => {
-      await x.simulate('click', {
-        persist: () => jest.fn(),
-      });
-      wrapper.update();
+      fireEvent.click(lastRemoveButton);
     });
 
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
 
   it('raises onChange and updates custom tags when removing a tag', async () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -204,56 +178,56 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const x = wrapper.find('svg').last();
-
-    x.simulate('click', {
-      persist: () => jest.fn(),
-    });
+    const removeButtons = container.querySelectorAll('svg');
+    const lastRemoveButton = removeButtons[
+      removeButtons.length - 1
+    ] as SVGElement;
 
     await act(async () => {
-      wrapper.update();
-      tags = getTagsFromDOM(wrapper);
+      fireEvent.click(lastRemoveButton);
     });
 
+    tags = getTagsFromDOM(container);
+
     expect(tags).toEqual(['1', '2']);
     expect(tags).toHaveLength(2);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
 
   it('raises onFocus event', () => {
-    const focusSpy = jest.fn();
-    const wrapper = shallow(
+    const focusSpy = vi.fn();
+    const { container } = render(
       <CustomTags name={'test-name'} onFocus={focusSpy} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.simulate('focus');
+    fireEvent.focus(input);
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   describe('onBlur', () => {
     it('raises onBlur event', () => {
-      const blurSpy = jest.fn();
-      const wrapper = shallow(
+      const blurSpy = vi.fn();
+      const { container } = render(
         <CustomTags name={'test-name'} onBlur={blurSpy} />,
       );
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
-      input.simulate('blur');
+      fireEvent.blur(input);
       expect(blurSpy).toHaveBeenCalledTimes(1);
     });
 
     it('adds a valid value to current tags state', async () => {
-      const blurSpy = jest.fn();
+      const blurSpy = vi.fn();
       const mockCurrentTags = ['1', '2', '3'];
       const mockTag = '4';
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           onBlur={blurSpy}
@@ -261,30 +235,27 @@ describe('CustomTags', () => {
         />,
       );
 
-      let tags = getTagsFromDOM(wrapper);
+      let tags = getTagsFromDOM(container);
 
       expect(tags).toHaveLength(3);
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
-      const attribute = document.createAttribute('value');
-      attribute.value = mockTag;
-      input.getDOMNode().setAttributeNode(attribute);
-      input.simulate('blur');
-      wrapper.update();
+      fireEvent.change(input, { target: { value: mockTag } });
+      fireEvent.blur(input);
 
-      tags = getTagsFromDOM(wrapper);
+      tags = getTagsFromDOM(container);
       expect(tags).toEqual([...mockCurrentTags, mockTag]);
       expect(tags).toHaveLength(4);
       expect(blurSpy).toHaveBeenCalledTimes(1);
-      expect(input.prop('value')).toBe('');
+      expect(input.value).toBe('');
     });
 
     it(`doesn't add value if value isn't valid`, async () => {
-      const blurSpy = jest.fn();
+      const blurSpy = vi.fn();
       const mockCurrentTags = ['1', '2', '3'];
       const mockInvalidTag = '';
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           onBlur={blurSpy}
@@ -292,30 +263,27 @@ describe('CustomTags', () => {
         />,
       );
 
-      let tags = getTagsFromDOM(wrapper);
+      let tags = getTagsFromDOM(container);
 
       expect(tags).toHaveLength(3);
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
-      const attribute = document.createAttribute('value');
-      attribute.value = mockInvalidTag;
-      input.getDOMNode().setAttributeNode(attribute);
-      input.simulate('blur');
-      wrapper.update();
+      fireEvent.change(input, { target: { value: mockInvalidTag } });
+      fireEvent.blur(input);
 
-      tags = getTagsFromDOM(wrapper);
+      tags = getTagsFromDOM(container);
       expect(tags).toEqual([...mockCurrentTags]);
       expect(tags).toHaveLength(3);
       expect(blurSpy).toHaveBeenCalledTimes(1);
-      expect(input.prop('value')).toBe('');
+      expect(input.value).toBe('');
     });
 
     it(`resets input and add button if value is an empty space(s)`, async () => {
-      const blurSpy = jest.fn();
+      const blurSpy = vi.fn();
       const mockCurrentTags = ['1', '2', '3'];
       const mockInvalidTag = '    ';
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           onBlur={blurSpy}
@@ -323,45 +291,42 @@ describe('CustomTags', () => {
         />,
       );
 
-      let tags = getTagsFromDOM(wrapper);
+      let tags = getTagsFromDOM(container);
 
       expect(tags).toHaveLength(3);
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
-      const attribute = document.createAttribute('value');
-      attribute.value = mockInvalidTag;
-      input.getDOMNode().setAttributeNode(attribute);
-      input.simulate('blur');
-      wrapper.update();
+      fireEvent.change(input, { target: { value: mockInvalidTag } });
+      fireEvent.blur(input);
 
-      tags = getTagsFromDOM(wrapper);
+      tags = getTagsFromDOM(container);
       expect(tags).toEqual([...mockCurrentTags]);
       expect(tags).toHaveLength(3);
       expect(blurSpy).toHaveBeenCalledTimes(1);
-      expect(input.prop('value')).toBe('');
+      expect(input.value).toBe('');
     });
   });
 
   it('display tags inline', () => {
-    const wrapper = shallow(<CustomTags name={'test-name'} />);
-    const wrapperStyles = wrapper.find('.tagsWrapper').get(0).props['style'];
-    expect(wrapperStyles).toHaveProperty('flexDirection', 'row');
+    const { container } = render(<CustomTags name={'test-name'} />);
+    const tagsWrapper = container.querySelector('.tagsWrapper') as HTMLElement;
+    expect(tagsWrapper.style.flexDirection).toBe('row');
   });
 
   it('display tags as rows', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <CustomTags name={'test-name'} displayAsRows={true} />,
     );
-    const wrapperStyles = wrapper.find('.tagsWrapper').get(0).props['style'];
-    expect(wrapperStyles).toHaveProperty('flexDirection', 'column');
+    const tagsWrapper = container.querySelector('.tagsWrapper') as HTMLElement;
+    expect(tagsWrapper.style.flexDirection).toBe('column');
   });
 
   it('should not raise onChange nor update current tags if the value is an empty string', () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '';
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -369,21 +334,16 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromShallowDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.prop('onKeyDown')?.({
-      key: 'Enter',
-      //@ts-expect-error we're not passing the full EventTarget
-      currentTarget: { value: mockTag },
-      persist: () => jest.fn(),
-      preventDefault: () => jest.fn(),
-    });
+    fireEvent.change(input, { target: { value: mockTag } });
+    fireEvent.keyDown(input, { key: 'Enter' });
 
-    tags = getTagsFromShallowDOM(wrapper);
+    tags = getTagsFromDOM(container);
 
     expect(tags).toEqual(mockCurrentTags);
     expect(tags).toHaveLength(3);
@@ -391,10 +351,10 @@ describe('CustomTags', () => {
   });
 
   it('should not raise onChange nor update current tags if the value is a duplicate', () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '2';
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -402,21 +362,16 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromShallowDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.prop('onKeyDown')?.({
-      key: 'Enter',
-      //@ts-expect-error we're not passing the full EventTarget
-      currentTarget: { value: mockTag },
-      persist: () => jest.fn(),
-      preventDefault: () => jest.fn(),
-    });
+    fireEvent.change(input, { target: { value: mockTag } });
+    fireEvent.keyDown(input, { key: 'Enter' });
 
-    tags = getTagsFromShallowDOM(wrapper);
+    tags = getTagsFromDOM(container);
 
     expect(tags).toEqual(mockCurrentTags);
     expect(tags).toHaveLength(3);
@@ -425,40 +380,35 @@ describe('CustomTags', () => {
 
   it('trims the entered value', () => {
     const mockTag = ' TagWithSpace';
-    const wrapper = shallow(<CustomTags name={'test-name'} />);
+    const { container } = render(<CustomTags name={'test-name'} />);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.prop('onKeyDown')?.({
-      key: 'Enter',
-      //@ts-expect-error we're not passing the full EventTarget
-      currentTarget: { value: mockTag },
-      persist: () => jest.fn(),
-      preventDefault: () => jest.fn(),
-    });
+    fireEvent.change(input, { target: { value: mockTag } });
+    fireEvent.keyDown(input, { key: 'Enter' });
 
-    const tag = wrapper.find('span > span');
+    const tag = container.querySelector('span > span');
 
-    expect(tag.text()).toEqual(mockTag.trim());
+    expect(tag?.textContent).toEqual(mockTag.trim());
   });
 
   describe('Error handling', () => {
     it('applies error styling and renders error message when an error is passed', () => {
       const mockErrorMessage = 'test-error-message';
-      const wrapper = shallow(
+      const { container } = render(
         <CustomTags name={'test-name'} error={mockErrorMessage} />,
       );
-      const errorMsg = wrapper.dive().find('small');
-      const errorStyling = wrapper.find('input');
-      expect(errorMsg.text()).toBe(mockErrorMessage);
-      expect(errorStyling.hasClass('hasError')).toBe(true);
+      const errorMsg = container.querySelector('small');
+      const errorStyling = container.querySelector('input');
+      expect(errorMsg?.textContent).toBe(mockErrorMessage);
+      expect(errorStyling?.classList.contains('hasError')).toBe(true);
     });
 
     it(`renders a 'Duplicate value' error message when the entered value already exists`, () => {
-      const onChangeSpy = jest.fn();
+      const onChangeSpy = vi.fn();
       const mockCurrentTags = ['1', '2', '3', '4'];
       const mockNewTag = '4';
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           onChange={onChangeSpy}
@@ -466,57 +416,52 @@ describe('CustomTags', () => {
         />,
       );
 
-      let errorMsg = wrapper.find('small');
-      let errorStyling = wrapper.find('input');
-      expect(errorMsg.exists()).toBe(false);
-      expect(errorStyling.hasClass('hasError')).toBe(false);
+      let errorMsg = container.querySelector('small');
+      let errorStyling = container.querySelector('input');
+      expect(errorMsg).not.toBeInTheDocument();
+      expect(errorStyling?.classList.contains('hasError')).toBe(false);
 
-      wrapper.update();
-
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       act(() => {
-        input.getDOMNode<HTMLInputElement>().value = mockNewTag;
-        input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockNewTag },
         });
       });
 
-      wrapper.update();
-
-      errorMsg = wrapper.find('small');
-      errorStyling = wrapper.find('input');
+      errorMsg = container.querySelector('small');
+      errorStyling = container.querySelector('input');
 
-      expect(errorMsg.text()).toBe('Duplicate value');
-      expect(errorStyling.hasClass('hasError')).toBe(true);
+      expect(errorMsg?.textContent).toBe('Duplicate value');
+      expect(errorStyling?.classList.contains('hasError')).toBe(true);
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
   });
 
   describe('Live Suggestions', () => {
     it(`'liveSuggestionsResolver' is undefined by default`, () => {
-      const wrapper = shallow(<CustomTags name={'test-name'} />);
-
-      const tags = wrapper.find('.container');
+      const { container } = render(<CustomTags name={'test-name'} />);
 
-      expect(tags.prop('liveSuggestionsResolver')).toBeUndefined();
+      // liveSuggestionsResolver is a prop, not a DOM attribute, so we just verify component renders
+      expect(container.querySelector('.container')).toBeInTheDocument();
     });
 
     it(`sets 'liveSuggestionsDelay'`, () => {
       const mockDelay = 500;
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags name={'test-name'} liveSuggestionsDelay={mockDelay} />,
       );
 
-      expect(wrapper.prop('liveSuggestionsDelay')).toBe(mockDelay);
+      // liveSuggestionsDelay is a prop, not a DOM attribute, so we just verify component renders
+      expect(container.querySelector('.container')).toBeInTheDocument();
     });
 
     it(`emits 'liveSuggestionsResolver' with value`, async () => {
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['test-value', 'test-value2'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -524,25 +469,20 @@ describe('CustomTags', () => {
         />,
       );
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
       expect(suggestionSpy).toHaveBeenCalledTimes(1);
       expect(suggestionSpy).toHaveBeenCalledWith(mockTag);
     });
@@ -550,9 +490,9 @@ describe('CustomTags', () => {
     it(`renders a list of suggestions if 'liveSuggestionsResolver' returns an array which contains values`, async () => {
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['test-value', 'test-value2'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -560,37 +500,32 @@ describe('CustomTags', () => {
         />,
       );
 
-      let suggestionsWrapper = wrapper.find('ul');
-      let suggestions = wrapper.find('li');
+      let suggestionsWrapper = container.querySelector('ul');
+      let suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
       expect(suggestionSpy).toHaveBeenCalledTimes(1);
       expect(suggestionSpy).toHaveBeenCalledWith(mockTag);
-      expect(suggestionsWrapper.exists()).toBe(true);
+      expect(suggestionsWrapper).toBeInTheDocument();
       expect(suggestions).toHaveLength(mockSuggestions.length);
     });
 
@@ -599,7 +534,7 @@ describe('CustomTags', () => {
       const firstSuggestionHandlerWait = 1000;
       const mockSuggestions1: string[] = ['test-value'];
       const mockSuggestions2: string[] = ['test-value2', 'test-value3'];
-      const suggestionSpy = jest
+      const suggestionSpy = vi
         .fn()
         .mockImplementationOnce(async () => {
           await wait(1000);
@@ -609,7 +544,7 @@ describe('CustomTags', () => {
           await wait(2000);
           return mockSuggestions2;
         });
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={[]}
@@ -618,81 +553,69 @@ describe('CustomTags', () => {
         />,
       );
 
-      let suggestionsWrapper = wrapper.find('ul');
-      let suggestions = wrapper.find('li');
+      let suggestionsWrapper = container.querySelector('ul');
+      let suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = 'value';
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: 'value' },
         });
       });
 
-      wrapper.update();
-
       // Advance time for first debounce to happen and trigger the resolver
       await act(async () => {
-        jest.advanceTimersByTime(suggestionDelay);
+        vi.advanceTimersByTime(suggestionDelay);
       });
 
-      wrapper.update();
-
       // Change the value, so first resolver should be rejected
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = 'changed';
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: 'changed' },
         });
       });
 
-      wrapper.update();
-
       // Advance time for second debounce to happen as well as the first resolver call to resolve
       await act(async () => {
-        jest.advanceTimersByTime(firstSuggestionHandlerWait);
+        vi.advanceTimersByTime(firstSuggestionHandlerWait);
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
       expect(suggestionSpy).toHaveBeenCalledTimes(2);
-      expect(suggestionsWrapper.exists()).toBe(false);
-      expect(suggestions.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
+      expect(suggestions).toHaveLength(0);
 
       // Advance time for the second resolver to resolve
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
         // It's so nice, we do it twice!
         // (if we do it only once, the test randomly fails sometimes...)
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
       expect(suggestionSpy).toHaveBeenCalledTimes(2);
-      expect(suggestionsWrapper.exists()).toBe(true);
-      expect(suggestions.exists()).toBe(true);
+      expect(suggestionsWrapper).toBeInTheDocument();
+      expect(suggestions.length).toBeGreaterThan(0);
       expect(suggestions).toHaveLength(mockSuggestions2.length);
     });
 
     it(`values that already exist are filtered out of suggestions`, async () => {
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['1', '2', '3', '4', '5'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -700,26 +623,24 @@ describe('CustomTags', () => {
         />,
       );
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      const suggestions = wrapper.find('li').map((node) => node.text());
+      const suggestionElements = container.querySelectorAll('li');
+      const suggestions = Array.from(suggestionElements).map(
+        (node) => node.textContent || '',
+      );
 
       const expectedSuggestions: string[] = mockSuggestions.filter(
         (item) => !mockCurrentTags.includes(item),
@@ -731,9 +652,9 @@ describe('CustomTags', () => {
     it(`does not render suggestions if 'liveSuggestionsResolver' returns an empty array`, async () => {
       const mockTag = 'test-';
       const mockSuggestions: string[] = [];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -741,46 +662,41 @@ describe('CustomTags', () => {
         />,
       );
 
-      let suggestionsWrapper = wrapper.find('ul');
-      let suggestions = wrapper.find('li');
+      let suggestionsWrapper = container.querySelector('ul');
+      let suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
       expect(suggestionSpy).toHaveBeenCalledTimes(1);
       expect(suggestionSpy).toHaveBeenCalledWith(mockTag);
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
     });
 
     it(`does not render suggestions if 'input' value is an empty string`, async () => {
       const mockTag = '';
       const mockSuggestions: string[] = ['1', '2', '3', '4', '5'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -788,36 +704,31 @@ describe('CustomTags', () => {
         />,
       );
 
-      let suggestionsWrapper = wrapper.find('ul');
-      let suggestions = wrapper.find('li');
+      let suggestionsWrapper = container.querySelector('ul');
+      let suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
       expect(suggestionSpy).not.toHaveBeenCalled();
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
     });
 
@@ -825,86 +736,71 @@ describe('CustomTags', () => {
       const mockTag = 'test-';
 
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags name={'test-name'} value={mockCurrentTags} />,
       );
 
-      let suggestionsWrapper = wrapper.find('ul');
-      let suggestions = wrapper.find('li');
+      let suggestionsWrapper = container.querySelector('ul');
+      let suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      suggestionsWrapper = wrapper.find('ul');
-      suggestions = wrapper.find('li');
+      suggestionsWrapper = container.querySelector('ul');
+      suggestions = container.querySelectorAll('li');
 
-      expect(suggestionsWrapper.exists()).toBe(false);
+      expect(suggestionsWrapper).not.toBeInTheDocument();
       expect(suggestions).toHaveLength(0);
     });
 
     it(`adds new tag when suggestion is clicked and sets focus on input`, async () => {
-      const onChangespy = jest.fn();
+      const onChangespy = vi.fn();
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['test-value', 'test-value2'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const holder = document.createElement('div');
-      document.body.appendChild(holder);
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           onChange={onChangespy}
           value={mockCurrentTags}
           liveSuggestionsResolver={suggestionSpy}
         />,
-        { attachTo: holder }, // See https://github.com/enzymejs/enzyme/issues/2337#issuecomment-609071803
       );
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      const input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
-      const suggestions = wrapper.find('li');
-
-      suggestions.first().simulate('mousedown');
+      const suggestions = container.querySelectorAll('li');
 
-      wrapper.update();
+      fireEvent.mouseDown(suggestions[0]);
 
-      const tags = getTagsFromDOM(wrapper);
+      const tags = getTagsFromDOM(container);
 
       const [firstSuggestion] = mockSuggestions;
 
@@ -912,16 +808,15 @@ describe('CustomTags', () => {
       expect(suggestionSpy).toHaveBeenCalledTimes(1);
       expect(suggestionSpy).toHaveBeenCalledWith(mockTag);
       expect(onChangespy).toHaveBeenCalledTimes(1);
-      expect(document.activeElement).toBe(input.getDOMNode());
-      wrapper.unmount();
+      expect(document.activeElement).toBe(input);
     });
 
     it(`selects right item when up and down arrows are pressed`, async () => {
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['test-value', 'test-value2'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -929,103 +824,88 @@ describe('CustomTags', () => {
         />,
       );
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      let input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
       // select first element in suggestions with down key
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowDown',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      let suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(true);
-      expect(suggestions.last().hasClass('selected')).toBe(false);
+      let suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(true);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(false);
 
       // select second element in suggestions with down key
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowDown',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(false);
-      expect(suggestions.last().hasClass('selected')).toBe(true);
+      suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(false);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(true);
 
       // attempt to select third element which doesn't exist and should leave the last element selected
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowDown',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(false);
-      expect(suggestions.last().hasClass('selected')).toBe(true);
+      suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(false);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(true);
 
       // select the first element again with the up key
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowUp',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(true);
-      expect(suggestions.last().hasClass('selected')).toBe(false);
+      suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(true);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(false);
 
       // pressing up key again when the first element is selected should deselect all
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowUp',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(false);
-      expect(suggestions.last().hasClass('selected')).toBe(false);
+      suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(false);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(false);
     });
 
     it(`adds item selected via arrow key when the 'Enter' key is pressed`, async () => {
-      const onChangespy = jest.fn();
+      const onChangespy = vi.fn();
       const mockTag = 'test-';
       const mockSuggestions: string[] = ['test-value', 'test-value2'];
-      const suggestionSpy = jest.fn().mockResolvedValue(mockSuggestions);
+      const suggestionSpy = vi.fn().mockResolvedValue(mockSuggestions);
       const mockCurrentTags: string[] = ['1', '2', '3'];
-      const wrapper = mount(
+      const { container } = render(
         <CustomTags
           name={'test-name'}
           value={mockCurrentTags}
@@ -1034,69 +914,60 @@ describe('CustomTags', () => {
         />,
       );
 
-      let tags = getTagsFromDOM(wrapper);
+      let tags = getTagsFromDOM(container);
 
       expect(tags).toHaveLength(3);
 
-      jest.useFakeTimers();
+      vi.useFakeTimers();
 
-      let input = wrapper.find('input');
+      const input = container.querySelector('input') as HTMLInputElement;
 
       await act(async () => {
-        input.getDOMNode<HTMLInputElement>().value = mockTag;
-        await input.simulate('change', {
+        fireEvent.change(input, {
           target: { value: mockTag },
         });
       });
 
-      wrapper.update();
-
       await act(async () => {
-        jest.runAllTimers();
+        vi.runAllTimers();
       });
 
-      wrapper.update();
-
       // select first element
-      input = wrapper.find('input');
       act(() => {
-        //@ts-expect-error we're not sending a full KeyboardEvent
-        input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'ArrowDown',
-          preventDefault: () => jest.fn(),
         });
       });
-      wrapper.update();
-      const suggestions = wrapper.find('li');
-      expect(suggestions.first().hasClass('selected')).toBe(true);
-      expect(suggestions.last().hasClass('selected')).toBe(false);
+      const suggestions = container.querySelectorAll('li');
+      expect(suggestions[0].classList.contains('selected')).toBe(true);
+      expect(
+        suggestions[suggestions.length - 1].classList.contains('selected'),
+      ).toBe(false);
 
       // enter key pressed
-      input = wrapper.find('input');
       await act(async () => {
-        await input.prop('onKeyDown')?.({
+        fireEvent.keyDown(input, {
           key: 'Enter',
-          //@ts-expect-error we're not sending a full KeyboardEvent
-          currentTarget: { value: mockTag },
-          persist: () => jest.fn(),
         });
-        wrapper.update();
-        tags = getTagsFromDOM(wrapper);
+      });
+
+      await waitFor(() => {
+        tags = getTagsFromDOM(container);
+        expect(tags).toHaveLength(4);
       });
 
       const [firstSuggestion] = mockSuggestions;
 
       expect(tags).toEqual([...mockCurrentTags, firstSuggestion]);
-      expect(tags).toHaveLength(4);
       expect(onChangespy).toHaveBeenCalledTimes(1);
     });
   });
 
   it('manages tags sorted', async () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockCurrentTags = ['4', '2', '1'];
     const mockTag = '3';
-    const wrapper = mount(
+    const { container } = render(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -1104,30 +975,25 @@ describe('CustomTags', () => {
       />,
     );
 
-    let tags = getTagsFromDOM(wrapper);
+    let tags = getTagsFromDOM(container);
 
     expect(tags).toHaveLength(3);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    const attribute = document.createAttribute('value');
-    attribute.value = mockTag;
-    input.getDOMNode().setAttributeNode(attribute);
-    input.simulate('change');
-    wrapper.update();
+    fireEvent.change(input, {
+      target: { value: mockTag },
+    });
 
-    const plusButton = wrapper
-      .find({
-        className: 'plusButton',
-        type: 'button',
-      })
-      .first();
-    plusButton.simulate('click');
+    const plusButton = container.querySelector(
+      '.plusButton',
+    ) as HTMLButtonElement;
+    fireEvent.click(plusButton);
 
-    tags = getTagsFromDOM(wrapper);
+    tags = getTagsFromDOM(container);
     expect(tags).toEqual(['1', '2', '3', '4']);
     expect(tags).toHaveLength(4);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(input.prop('value')).toBe('');
+    expect(input.value).toBe('');
   });
 });