contentful · david-shibley-contentful · Oct 16, 2024
diff --git a/packages/ecommerce-app-base/package-lock.json b/packages/ecommerce-app-base/package-lock.json
diff --git a/packages/ecommerce-app-base/package.json b/packages/ecommerce-app-base/package.json
@@ -29,18 +29,15 @@
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "15.0.7",
-    "@types/jest": "27.5.0",
     "@types/lodash": "4.17.7",
-    "@types/node": "12.20.55",
-    "@types/react": "18.2.0",
+    "@types/react": "18.2.25",
     "@types/react-dom": "18.2.0",
     "@typescript-eslint/parser": "^6.4.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "jest": "27.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
@@ -58,10 +55,11 @@
     "@contentful/react-apps-toolkit": "^1.2.16",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@emotion/css": "^11.13.4",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "contentful-management": "^10.0.0",
-    "emotion": "^10.0.0",
-    "lodash": "^4.0.0"
+    "lodash": "^4.0.0",
+    "vitest": "^2.1.3"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -71,8 +69,8 @@
     "build": "rimraf lib && tsc",
     "build:docs": "rimraf docs && typedoc",
     "prepublishOnly": "npm run build && npm run build:docs",
-    "test": "jest --watch",
-    "test:ci": "CI=true jest --runInBand",
+    "test": "vitest",
+    "test:ci": "CI=true vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "eslint src"

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC, PropsWithChildren } from 'react';
 import { Box } from '@contentful/f36-components';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tokens from '@contentful/f36-tokens';
 
 const styles = {

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { Caption, TextLink } from '@contentful/f36-components';
 import { ExternalLinkIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const styles = {
   textLink: css({ fontSize: tokens.fontSizeS }),

@@ -8,8 +8,8 @@ describe('A MetaDataRenderer', () => {
       <MetaDataRenderer columns={[{ title: 'hello world', items: [] }]} />
     );
     const title = getByRole('heading');
-    expect(title).toBeInTheDocument();
-    expect(title).toHaveTextContent('hello world');
+    expect(title).toBeTruthy();
+    expect(title.innerHTML).toBe('hello world');
   });
 
   it('can render columns content', () => {

@@ -3,7 +3,7 @@ import { columns } from '../../__mocks__/products';
 import { MetaDataRenderer } from './MetaDataRenderer';
 import { Box, Caption, TextLink } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const meta: Meta<typeof MetaDataRenderer> = {
   title: 'AdditionalData/MetaDataRenderer',

@@ -4,7 +4,7 @@ import { Box, Caption } from '@contentful/f36-components';
 import { Row } from './Row';
 import { Column } from './Column';
 import { Container } from '../Container';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tokens from '@contentful/f36-tokens';
 
 type ItemData = {

@@ -8,13 +8,13 @@ describe('A RawDataRenderer', () => {
   it('provides a copy button', () => {
     const { getByRole } = render(<RawDataRenderer value={VALUE} />);
     const button = getByRole('button');
-    expect(button).toBeInTheDocument();
+    expect(button).toBeTruthy();
   });
 
   it('displays a string representation of the data', () => {
     const { getByRole } = render(<RawDataRenderer value={VALUE} />);
     const code = getByRole('document');
-    expect(code).toBeInTheDocument();
-    expect(code).toHaveTextContent('{ "hello": "world" }');
+    expect(code).toBeTruthy();
+    expect(code.innerHTML).toBe(JSON.stringify(VALUE, null, 2));
   });
 });
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import * as React from 'react';
 import { CopyButton, Flex } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const styles = {
   box: css({

@@ -145,7 +145,7 @@ describe('AppConfig', () => {
       screen.getByText(/The Some app app supports External references/)
     );
 
-    expect(result).toHaveTextContent('The Some app app supports External references');
+    expect(result.innerHTML).toBe('The Some app app supports External references');
   });
 
   it('hides the EAP orchestration note on click', async () => {
@@ -158,7 +158,7 @@ describe('AppConfig', () => {
 
     await waitFor(() => {
       const hiddenNote = screen.queryByText(/The Some app app supports External references/);
-      expect(hiddenNote).not.toBeInTheDocument();
+      expect(hiddenNote).not.toBeTruthy();
     });
   });
 

@@ -14,7 +14,7 @@ import {
 import { OrchestrationEapNote } from './OrchestrationEapNote';
 
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import FieldSelector from './FieldSelector';
 

@@ -1,6 +1,6 @@
 import { Checkbox, Flex, Form, Paragraph, Radio, Subheading } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import * as React from 'react';
 import { Integration } from '../types';
 import { CompatibleFields, ContentType, FieldsSkuTypes, SelectedFields } from './fields';

@@ -1,7 +1,7 @@
 import { Note, TextLink } from '@contentful/f36-components';
 
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ExternalLinkIcon } from '@contentful/f36-icons';
 
 const styles = {

@@ -1,7 +1,7 @@
 import { Box, Button, Note } from '@contentful/f36-components';
 import { ShoppingCartIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FieldsSkuTypes } from '../AppConfig/fields';

@@ -4,6 +4,7 @@ import { SortableComponent } from './SortableComponent';
 import { makeSdkMock, productsList } from '../__mocks__';
 import { FieldAppSDK } from '@contentful/app-sdk';
 import { ProductPreviewsFn } from '../types';
+import { vi } from 'vitest';
 
 const mockSdk = makeSdkMock();
 const skus = ['M0E20130820E90Z', 'A0E2300FX102203', 'M0E21300900DZN7'];
@@ -15,15 +16,15 @@ describe('SortableComponent', () => {
 
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - typescript is upset because jest.fn() returns a type different than ProductPreviewsFn
-    mockFetchProductPreviews = jest.fn().mockImplementation(() => {
+    // @ts-ignore - typescript is upset because vi.fn() returns a type different than ProductPreviewsFn
+    mockFetchProductPreviews = vi.fn().mockImplementation(() => {
       return Promise.resolve(productsList);
     });
   });
 
   afterEach(() => {
     cleanup();
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it('calls `fetchProductPreviews()` to retrieve list of products for associated skus', async () => {
@@ -34,7 +35,7 @@ describe('SortableComponent', () => {
           disabled={false}
           config={mockConfig}
           skus={skus}
-          onChange={jest.fn()}
+          onChange={vi.fn()}
           fetchProductPreviews={mockFetchProductPreviews}
           skuType={mockSkuType}
         />
@@ -56,7 +57,7 @@ describe('SortableComponent', () => {
           disabled={false}
           config={mockConfig}
           skus={skus}
-          onChange={jest.fn()}
+          onChange={vi.fn()}
           fetchProductPreviews={mockFetchProductPreviews}
           skuType={mockSkuType}
         />
@@ -69,7 +70,7 @@ describe('SortableComponent', () => {
           sdk={mockSdk as unknown as FieldAppSDK}
           disabled={false}
           config={mockConfig}
-          onChange={jest.fn()}
+          onChange={vi.fn()}
           fetchProductPreviews={mockFetchProductPreviews}
           skuType={mockSkuType}
         />
@@ -91,7 +92,7 @@ describe('SortableComponent', () => {
           disabled={false}
           config={mockConfig}
           skus={skus}
-          onChange={jest.fn()}
+          onChange={vi.fn()}
           fetchProductPreviews={mockFetchProductPreviews}
           skuType={mockSkuType}
         />
@@ -104,7 +105,7 @@ describe('SortableComponent', () => {
           sdk={mockSdk as unknown as FieldAppSDK}
           disabled={false}
           config={mockConfig}
-          onChange={jest.fn()}
+          onChange={vi.fn()}
           fetchProductPreviews={mockFetchProductPreviews}
           skuType={mockSkuType}
         />

@@ -1,11 +1,13 @@
 import { render, cleanup } from '@testing-library/react';
 import { Props, SortableList } from './SortableList';
 import { productsList } from '../__mocks__';
+import React from 'react';
+import { vi } from 'vitest';
 
 const defaultProps: Props = {
   disabled: false,
   productPreviews: productsList,
-  deleteFn: jest.fn(),
+  deleteFn: vi.fn(),
 };
 
 const renderComponent = (props: Props) => {

@@ -2,11 +2,12 @@ import { cleanup, fireEvent, render } from '@testing-library/react';
 import { SortableListItem } from './SortableListItem';
 import { productsList } from '../__mocks__';
 import { Props } from '../ProductCard/LegacyProductCard/LegacyProductCard';
+import { vi } from 'vitest';
 
 const defaultProps: Props = {
   product: productsList[0],
   disabled: false,
-  onDelete: jest.fn(),
+  onDelete: vi.fn(),
   isSortable: false,
 };
 

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Badge, Card, Heading, IconButton, Subheading } from '@contentful/f36-components';
 import { CloseIcon, ExternalLinkIcon } from '@contentful/f36-icons';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tokens from '@contentful/f36-tokens';
 import type { Product } from '../../types';
 import { ProductImage } from '../ProductImage';

@@ -2,6 +2,8 @@ import { ProductCard } from './ProductCard';
 import userEvent from '@testing-library/user-event';
 import { cleanup, render, screen } from '@testing-library/react';
 import { productsList } from '../../__mocks__';
+import React from 'react';
+import { vi } from 'vitest';
 
 const { getByText } = screen;
 
@@ -11,20 +13,20 @@ describe('ProductCard component', () => {
   afterEach(cleanup);
 
   it('mounts', () => {
-    const mockOnSelect = jest.fn();
+    const mockOnSelect = vi.fn();
     render(<ProductCard title="Kleenex product" onSelect={mockOnSelect} resource={product} />);
 
     const productName = product.name!;
     const productDescription =
       'Open your door to the world of grilling with the sleek Spirit II E-210...';
 
-    expect(getByText(productName)).toBeVisible();
-    expect(getByText(productDescription)).toBeVisible();
+    expect(getByText(productName)).toBeTruthy();
+    expect(getByText(productDescription)).toBeTruthy();
   });
 
   it('handles onSelect', async () => {
     userEvent.setup();
-    const mockOnSelect = jest.fn();
+    const mockOnSelect = vi.fn();
     render(<ProductCard title="Kleenex product" onSelect={mockOnSelect} resource={product} />);
 
     const productName = product.name!;

@@ -5,7 +5,7 @@ import { ProductCardHeader } from '../ProductCardHeader/ProductCardHeader';
 import { ProductCardBody } from '../ProductCardBody/ProductCardBody';
 import { useIntegration } from '../../Editor';
 
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tokens from '@contentful/f36-tokens';
 
 export const styles = {

@@ -1,6 +1,7 @@
 import { ProductCardBody } from './ProductCardBody';
 import { cleanup, render, screen } from '@testing-library/react';
 import { productsList } from '../../__mocks__';
+import React from 'react';
 
 const { getByText, getByTestId, queryByTestId } = screen;
 
@@ -19,10 +20,10 @@ describe('ProductCardBody component', () => {
     const idElement = getByText(id);
     const imageElement = document.querySelector('img');
 
-    expect(mainBody).toBeVisible();
-    expect(titleElement).toBeVisible();
-    expect(descriptionElement).toBeVisible();
-    expect(idElement).toBeVisible();
+    expect(mainBody).toBeTruthy();
+    expect(titleElement).toBeTruthy();
+    expect(descriptionElement).toBeTruthy();
+    expect(idElement).toBeTruthy();
     expect(imageElement?.getAttribute('src')).toBe(image);
   });
 
@@ -38,6 +39,6 @@ describe('ProductCardBody component', () => {
     const errorMessage = getByText('Resource is missing or inaccessible');
 
     expect(mainBody).toBeFalsy();
-    expect(errorMessage).toBeVisible();
+    expect(errorMessage).toBeTruthy();
   });
 });
@@ -2,26 +2,24 @@ import { ProductCardHeader } from './ProductCardHeader';
 import { render, screen } from '@testing-library/react';
 import * as React from 'react';
 
-const { getByText, getAllByTestId } = screen;
+const { getByText, getByLabelText } = screen;
 
 describe('ProductCardHeader component', () => {
   it('mounts', () => {
     const headerTitle = 'Shopify product';
     render(<ProductCardHeader headerTitle={headerTitle} />);
     const titleElement = getByText(headerTitle);
-    expect(titleElement).toBeVisible();
+    expect(titleElement).toBeTruthy();
   });
 
   it('mounts showing header menu', () => {
     const headerTitle = 'Shopify product';
     render(<ProductCardHeader headerTitle={headerTitle} showHeaderMenu />);
 
     const titleElement = getByText(headerTitle);
-    const buttons = getAllByTestId('cf-ui-icon-button');
-    const menuButton = buttons[0];
+    const menuButton = getByLabelText('Actions');
 
-    expect(titleElement).toBeVisible();
-    expect(menuButton).toBeVisible();
-    expect(menuButton).toHaveAttribute('aria-label', 'Actions');
+    expect(titleElement).toBeTruthy();
+    expect(menuButton).toBeTruthy();
   });
 });
@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from '@contentful/f36-components';
 import { ProductCardMenu } from '../ProductCardMenu/ProductCardMenu';
 import { ExternalResource } from '../types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tokens from '@contentful/f36-tokens';
 
 export const styles = {