chore(vitest): minor fixes and unused dependencies removed

Author: AbhinavMV

package.json

@@ -35,7 +35,6 @@
         "@mdx-js/preact": "^2.1.2",
         "@mdx-js/react": "^2.1.1",
         "@nrwl/eslint-plugin-nx": "14.1.5",
-        "@nrwl/jest": "14.1.9",
         "@nrwl/js": "14.1.9",
         "@nrwl/linter": "14.1.5",
         "@storybook/addon-essentials": "^6.4.22",
@@ -47,7 +46,6 @@
         "@storybook/testing-react": "^1.2.4",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
-        "@types/jest": "^27.5.1",
         "@types/node": "^17.0.26",
         "@types/react": "^18.0.6",
         "@types/react-dom": "^18.0.2",
@@ -61,8 +59,6 @@
         "eslint": "~8.12.0",
         "eslint-config-prettier": "8.1.0",
         "fast-glob": "^3.2.11",
-        "jest": "^28.1.0",
-        "jest-styled-components": "^7.0.8",
         "msw": "^0.42.1",
         "msw-storybook-addon": "^1.6.3",
         "node-polyfill-webpack-plugin": "^1.1.4",
@@ -74,7 +70,6 @@
         "rollup-plugin-node-builtins": "^2.1.2",
         "storybook": "^6.5.8",
         "styled-components": "^5.3.5",
-        "ts-jest": "27.1.4",
         "ts-node": "9.1.1",
         "typescript": "^4.6.3",
         "vite": "^2.9.5",

packages/core/src/IconsGallery/Icon.test.tsx

@@ -1,7 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import * as Icons from '@web3uikit/icons';
-
+import { test, expect } from 'vitest';
+import React from 'react';
 const testIconId = 'test-icon';
+import '@testing-library/jest-dom';
 
 Object.values(Icons).forEach((Icon, index) => {
     test(`Renders - ${Icon.name} Icon`, () => {

packages/core/src/lib/Accordion/Accordion.test.tsx

@@ -3,6 +3,7 @@ import { composeStories } from '@storybook/testing-react';
 import * as stories from './Accordion.stories';
 import { tagTestId } from '../Tag/Tag.test';
 import { color } from '@web3uikit/styles';
+import { test, expect, describe } from 'vitest';
 
 const { Default, FullDemo, HasIcon, HasSubtitle, HasTag, ThemeColor } =
     composeStories(stories);

packages/core/src/lib/Avatar/Avatar.test.tsx

@@ -1,8 +1,8 @@
-
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Avatar.stories';
 import { roundedEdgeValue } from './Avatar.styles';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const {
     AvatarImageDefault,
@@ -123,9 +123,7 @@ test('Avatar - CustomSizeAndFontSize', () => {
 
     // It has a custom font size
     const styles = element && getComputedStyle(element);
-    expect(styles?.fontSize).toBe(
-        `${CustomSizeAndFontSize?.args?.fontSize}px`,
-    );
+    expect(styles?.fontSize).toBe(`${CustomSizeAndFontSize?.args?.fontSize}px`);
 
     // It has a custom size
     expect(styles?.width).toBe(`${CustomSizeAndFontSize?.args?.size}px`);

packages/core/src/lib/Badge/Badge.test.tsx

@@ -1,4 +1,5 @@
 import * as stories from './Badge.stories';
+import { test, expect, describe } from 'vitest';
 
 import { render, screen } from '@testing-library/react';
 import { color, rgbToHex } from '@web3uikit/styles';

packages/core/src/lib/BannerStrip/BannerStrip.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './BannerStrip.stories';
 import { color, rgbToHex } from '@web3uikit/styles';
+import { test, expect, describe } from 'vitest';
 
 const { Standard, StandardWithButton, Warning, Error, Success } =
     composeStories(stories);

packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx

@@ -2,9 +2,7 @@ import { fireEvent, waitFor, screen, render } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Breadcrumbs.stories';
 import { color } from '@web3uikit/styles';
-
-import 'jest-styled-components';
-
+import { test, expect, describe } from 'vitest';
 const { One, Two, Three, Four } = composeStories(stories);
 
 const olId = 'breadcrumbs-ol-test-id';

packages/core/src/lib/Button/Button.test.tsx

@@ -2,8 +2,8 @@ import { cleanup, fireEvent, render } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Button.stories';
 import { color, rgbToHex } from '@web3uikit/styles';
+import { test, expect, describe, vi } from 'vitest';
 
-import { vi } from 'vitest';
 const {
     ColoredBlue,
     ColoredGreen,

packages/core/src/lib/Card/Card.test.tsx

@@ -1,7 +1,7 @@
-
 import { render, screen } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Card.stories';
+import { test, expect, describe } from 'vitest';
 
 const { Regular, RegularSelected, Disabled } = composeStories(stories);
 

packages/core/src/lib/ChainSelector/ChainSelector.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 import ChainSelector from './ChainSelector';
 

packages/core/src/lib/Checkbox/Checkbox.test.tsx

@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Checkbox.stories';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
+
 const {
     Box,
     BoxDisabled,

packages/core/src/lib/CodeArea/CodeArea.test.tsx

@@ -2,6 +2,7 @@ import { composeStories } from '@storybook/testing-react';
 import { CodeArea } from '.';
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 import { color } from '@web3uikit/styles';
 import * as stories from './CodeArea.stories';

packages/core/src/lib/CopyButton/CopyButton.test.tsx

@@ -5,6 +5,7 @@ import {
     act,
     waitFor,
 } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 import CopyButton from './CopyButton';
 

packages/core/src/lib/Credentials/Credentials.test.tsx

@@ -1,6 +1,7 @@
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Credentials.stories';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const { WithTitleAndIcon, WithTitle, OneLine } = composeStories(stories);
 

packages/core/src/lib/CryptoCards/CryptoCards.test.tsx

@@ -2,9 +2,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './CryptoCards.stories';
 import { color, rgbToHex } from '@web3uikit/styles';
-import 'jest-styled-components';
+
 import '@testing-library/jest-dom/extend-expect';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
 
 const { Ethereum, Binance, Polygon, Avalanche, Fantom, Arbitrum } =
     composeStories(stories);

packages/core/src/lib/CryptoLogos/CryptoLogos.test.tsx

@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './CryptoLogos.stories';
 import { color, rgbToHex } from '@web3uikit/styles';
-import 'jest-styled-components';
+import { test, expect, describe } from 'vitest';
+
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 

packages/core/src/lib/DatePicker/DatePicker.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import DatePicker from './DatePicker';
+import { test, expect, describe } from 'vitest';
 
 const datePickerTestId = 'test-date-picker';
 const datePickerIcon = 'date-picker_icon';

packages/core/src/lib/Dropdown/Dropdown.test.tsx

@@ -1,7 +1,8 @@
-
 import { render, screen, fireEvent } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Dropdown.stories';
+import { test, expect, describe } from 'vitest';
+
 const { Default, ControlledState, NonFixedLabel, Iconless } =
     composeStories(stories);
 

packages/core/src/lib/Form/Form.test.tsx

@@ -1,6 +1,7 @@
 import { configure, render, screen } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Form.stories';
+import { test, expect, describe } from 'vitest';
 
 const { DemoForm } = composeStories(stories);
 const formTestID = 'test-form';

packages/core/src/lib/Hero/Hero.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import Hero from './Hero';
 import { Button } from '../Button';
 import { color, rgbToHex } from '@web3uikit/styles';
+import { test, expect, describe } from 'vitest';
 
 const testTitle = 'never test a Hero';
 const testBgURL =

packages/core/src/lib/HideButton/HideButton.test.tsx

@@ -1,6 +1,7 @@
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './HideButton.stories';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const { Default, HiddenState } = composeStories(stories);
 

packages/core/src/lib/Info/Information.test.tsx

@@ -1,7 +1,7 @@
-
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Information.stories';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const { Regular } = composeStories(stories);
 

packages/core/src/lib/Input/Input.test.tsx

@@ -1,9 +1,10 @@
 import { cleanup, render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import 'jest-styled-components';
+
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Input.stories';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
+
 import { color, rgbToHex } from '@web3uikit/styles';
 
 import Input from './Input';

packages/core/src/lib/LinkTo/LinkTo.test.tsx

@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/testing-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as stories from './LinkTo.stories';
-import 'jest-styled-components';
+import { test, expect, describe } from 'vitest';
+
 import { color, rgbToHex } from '@web3uikit/styles';
 
 const {

packages/core/src/lib/Loading/Loading.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Loading.stories';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const {
     Loader,

packages/core/src/lib/Logo/Logo.test.tsx

@@ -1,7 +1,7 @@
-
 import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 import * as stories from './Logo.stories';
+import { test, expect, describe } from 'vitest';
 
 const {
     AmexRegular,

packages/core/src/lib/Modal/Modal.test.tsx

@@ -3,7 +3,7 @@ import Modal from './Modal';
 import { Cloud } from '@web3uikit/icons';
 import { color } from '@web3uikit/styles';
 import { ModalProps } from './types';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
 
 const args: ModalProps = {
     id: 'regular',

packages/core/src/lib/NewComp/NewComp.test.tsx

@@ -3,6 +3,7 @@
 import { composeStories } from '@storybook/testing-react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import * as stories from './NewComp.stories';
+import { test, expect, describe } from 'vitest';
 
 // // importing fire event from RTL to mock a click event
 // import { fireEvent } from '@testing-library/react';

packages/core/src/lib/Notification/Notification.test.tsx

@@ -1,6 +1,5 @@
-import 'jest-styled-components';
 import * as stories from './Notification.stories';
-
+import { test, expect, describe } from 'vitest';
 import { render, cleanup } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 const { Regular, Standard, CustomIcon } = composeStories(stories);

packages/core/src/lib/PlanCard/PlanCard.test.tsx

@@ -1,7 +1,7 @@
-
 import { composeStories } from '@storybook/testing-react';
 import { render, within } from '@testing-library/react';
 import * as stories from './PlanCard.stories';
+import { test, expect, describe } from 'vitest';
 
 const { PlanCardStory, CurrentPlanStory } = composeStories(stories);
 

packages/core/src/lib/PopoverDropdown/PopoverDropdown.test.tsx

@@ -1,4 +1,3 @@
-
 import { composeStories } from '@storybook/testing-react';
 import {
     fireEvent,
@@ -8,7 +7,7 @@ import {
     cleanup,
 } from '@testing-library/react';
 import * as stories from './PopoverDropdown.stories';
-import 'jest-styled-components';
+import { test, expect, describe } from 'vitest';
 
 const { PopoverSelection } = composeStories(stories);
 

packages/core/src/lib/PopoverElement/PopoverElement.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, cleanup } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './PopoverElement.stories';
-import 'jest-styled-components';
-import { vi } from 'vitest';
+
+import { test, expect, describe, vi } from 'vitest';
 
 const { Default } = composeStories(stories);
 const testClickEvent = vi.fn();

packages/core/src/lib/Radios/Radios.test.tsx

@@ -2,7 +2,7 @@ import { composeStories } from '@storybook/testing-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import * as stories from './Radios.stories';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
 
 const {
     RadioGroup,

packages/core/src/lib/Row/Row.test.tsx

@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 import * as stories from './Row.stories';
 

packages/core/src/lib/Select/Select.test.tsx

@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 import { color } from '@web3uikit/styles';
 import * as stories from './Select.stories';

packages/core/src/lib/Skeleton/Skeleton.test.tsx

@@ -4,6 +4,7 @@ import { cleanup, render } from '@testing-library/react';
 import { color, rgbToHex } from '@web3uikit/styles';
 
 import * as stories from './Skeleton.stories';
+import { test, expect, describe } from 'vitest';
 
 const { SkeletonImage } = composeStories(stories);
 const skeletonTestId = 'test-skeleton-id';

packages/core/src/lib/Stepper/Stepper.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render, cleanup } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Stepper.stories';
 import { noNavTestStepData, testStepData } from './testStepData';
+import { test, expect, describe } from 'vitest';
 
 const { Demo, PreLoadStep0, StepsWithFooter, StepsWithoutNav } =
     composeStories(stories);

packages/core/src/lib/Table/Table.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Table.stories';
 import { render, fireEvent, screen } from '@testing-library/react';
-import { vi } from 'vitest';
+import { test, expect, describe, vi } from 'vitest';
 
 const {
     DefaultTable,

packages/core/src/lib/Tabs/Tabs.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { composeStories } from '@storybook/testing-react';
 import * as Stories from './Tabs.stories';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { test, expect, describe } from 'vitest';
 
 const {
     TabBar,