fix: some issues with esm

packages/components/package.json

@@ -20,7 +20,7 @@
     "start": "tcm watch",
     "build": "yarn build:tokens && tcm build --format esm",
     "build:tokens": "orchard generate",
-    "test": "yarn build:tokens && cross-env NODE_OPTIONS=--experimental-vm-modules tcm test",
+    "test": "yarn build:tokens && cross-env NODE_OPTIONS=--experimental-vm-modules tcm test --no-cache",
     "lint": "yarn build:tokens && tcm lint",
     "prepare": "tcm build --format esm",
     "size": "size-limit",
@@ -29,11 +29,6 @@
     "build-storybook": "yarn build:tokens && build-storybook",
     "release": "yarn lint && yarn build && release-it --ci --npm.access=public"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transform": {},
-    "extensionsToTreatAsEsm": [".ts", ".tsx"]
-  },
   "name": "@aw-web-design/components",
   "author": "The-Code-Monkey",
   "module": "dist/components.esm.js",
@@ -48,38 +43,30 @@
     }
   ],
   "devDependencies": {
+    "@testing-library/react": "13.1.1",
     "cross-env": "7.0.3",
-    "@babel/core": "7.17.10",
     "@size-limit/file": "7.0.8",
     "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-links": "6.4.22",
     "@storybook/addons": "6.4.22",
     "@storybook/react": "6.4.22",
     "@tsconfig/create-react-app": "1.0.2",
     "@tsconfig/recommended": "1.0.1",
-    "@types/enzyme": "3.10.12",
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "@types/react-table": "7.7.11",
     "@types/styled-components": "5.1.25",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
-    "babel-jest": "28.0.3",
-    "babel-loader": "8.2.5",
-    "babel-plugin-module-resolver": "4.1.0",
-    "enzyme": "3.11.0",
-    "enzyme-to-json": "3.6.2",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.0.0",
     "react-is": "18.1.0",
     "size-limit": "7.0.8",
-    "ts-jest": "28.0.0-next.3",
     "tslib": "2.4.0",
     "typescript": "4.6.4"
   },
   "dependencies": {
     "@aw-web-design/react-feather": "3.1.45",
     "@aw-web-design/styled-system": "3.2.0",
-    "@aw-web-design/tcm-cli": "3.1.46",
+    "@aw-web-design/tcm-cli": "3.1.50",
     "@aw-web-design/theme": "3.1.43",
     "classnames": "2.3.1",
     "csstype": "3.0.11",

packages/components/src/atoms/button/__test__/index.test.tsx

@@ -1,36 +1,35 @@
-import toJson from 'enzyme-to-json';
-import React from 'react';
+import * as React from 'react';
 
 import { mountWithTheme } from '../../../test-tools';
 import Button from '../index';
 
 describe('<Button />', () => {
   it('renders default correctly', () => {
-    const wrapper = mountWithTheme(<Button>Default</Button>);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment } = mountWithTheme(<Button>Default</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders primary correctly', () => {
-    const wrapper = mountWithTheme(<Button variant='primary'>Primary</Button>);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const {asFragment} = mountWithTheme(<Button variant='primary'>Primary</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders secondary correctly', () => {
-    const wrapper = mountWithTheme(
+    const {asFragment} = mountWithTheme(
       <Button variant='secondary'>Secondary</Button>
     );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders icon correctly', () => {
-    const wrapper = mountWithTheme(
+    const {asFragment} = mountWithTheme(
       <Button iconName='GitHub'>Secondary</Button>
     );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders icon only correctly', () => {
-    const wrapper = mountWithTheme(<Button iconName='GitHub' />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment} = mountWithTheme(<Button iconName='GitHub' />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/atoms/checkbox/__test__/index.test.tsx

@@ -6,24 +6,24 @@ import Checkbox from '../index';
 
 describe('<Checkbox />', () => {
   it('renders correctly no icon', () => {
-    const wrapper = mountWithTheme(<Checkbox />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment } = mountWithTheme(<Checkbox />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders correctly checked', () => {
-    const wrapper = mountWithTheme(<Checkbox checked />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment } = mountWithTheme(<Checkbox checked />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders correctly indeterminate', () => {
-    const wrapper = mountWithTheme(<Checkbox indeterminate />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment } = mountWithTheme(<Checkbox indeterminate />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('calls onClick function', () => {
     const handleClick = jest.fn();
 
-    const wrapper = mountWithTheme(<Checkbox onClick={handleClick} />);
+    const { asFragment } = mountWithTheme(<Checkbox onClick={handleClick} />);
 
     wrapper.find('div').simulate('click');
 

packages/components/src/atoms/divider/__test__/index.test.tsx

@@ -6,8 +6,8 @@ import Divider from '../index';
 
 describe('<Divider />', () => {
   it('renders correctly', () => {
-    const wrapper = mountWithTheme(<Divider />);
+    const { asFragment } = mountWithTheme(<Divider />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/atoms/grid/__test__/index.test.tsx

@@ -6,7 +6,7 @@ import Grid, { Cell } from '../index';
 
 describe('<Grid />', () => {
   it('renders correctly', () => {
-    const wrapper = mountWithTheme(
+    const { asFragment } = mountWithTheme(
       <Grid columns={['auto', '1fr 1fr', '1fr 1fr 2fr']}>
         <Cell>Cell 1</Cell>
         <Cell>Cell 2</Cell>
@@ -16,6 +16,6 @@ describe('<Grid />', () => {
       </Grid>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/atoms/input/__test__/index.test.tsx

@@ -6,8 +6,8 @@ import Input from '../index';
 
 describe('<Input />', () => {
   it('renders correctly', () => {
-    const wrapper = mountWithTheme(<Input name='test' />);
+    const { asFragment } = mountWithTheme(<Input name='test' />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/atoms/table/__test__/index.test.tsx

@@ -6,8 +6,8 @@ import Table from '../index';
 
 describe('<Table />', () => {
   it('should render correctly', () => {
-    const wrapper = mountWithTheme(<Table columns={[]} data={[]} />);
+    const { asFragment } = mountWithTheme(<Table columns={[]} data={[]} />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/primatives/icon/__test__/index.test.tsx

@@ -8,7 +8,7 @@ jest.mock('../utils');
 
 describe('<Icon />', () => {
   it('renders correctly', () => {
-    const wrapper = mountWithTheme(<Icon name='GitHub' />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const { asFragment } = mountWithTheme(<Icon name='GitHub' />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/components/src/test-tools/index.tsx

@@ -1,4 +1,4 @@
-import { mount, shallow, ShallowWrapper, ReactWrapper } from 'enzyme';
+import { render } from "@testing-library/react";
 import React, { ReactNode } from 'react';
 import { ThemeProvider } from 'styled-components';
 
@@ -36,19 +36,12 @@ const formattedTheme = {
   },
 };
 
-export const shallowWithTheme: (children: ReactNode) => ShallowWrapper = (
-  children: ReactNode
-) =>
-  shallow(<ThemeProvider theme={formattedTheme}>{children}</ThemeProvider>)
-    .dive()
-    .shallow();
-
-export const mountWithTheme: (children: ReactNode) => ReactWrapper = (
+export const mountWithTheme = (
   children: ReactNode
 ) => {
   expect.addSnapshotSerializer(removeProperties());
 
-  return mount(
+  return render(
     <ConfigContext.Provider value={config}>
       <ThemeProvider theme={formattedTheme}>
         <>{children}</>

packages/react-feather/package.json

@@ -11,9 +11,10 @@
     "src"
   ],
   "scripts": {
+    "clear": "tcm test --clearCache",
     "lint": "tcm lint",
     "build": "tcm build --format esm",
-    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules tcm test"
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules tcm test --no-cache"
   },
   "publishConfig": {
     "access": "public"
@@ -37,7 +38,7 @@
   "homepage": "https://github.com/The-Code-Monkey/TechStack#readme",
   "devDependencies": {
     "cross-env": "7.0.3",
-    "@aw-web-design/tcm-cli": "3.1.46"
+    "@aw-web-design/tcm-cli": "3.1.50"
   },
   "dependencies": {
     "@aw-web-design/react-lazy-named": "1.0.5"

packages/react-feather/src/Icon.tsx

@@ -1,8 +1,8 @@
 import lazy from '@aw-web-design/react-lazy-named';
 import * as React from 'react';
 
-import { default as HelpCircle } from './icons/help-circle.js';
-import { IconProps } from './types.js';
+import { default as HelpCircle } from './icons/help-circle';
+import { IconProps } from './types';
 
 export interface Props extends IconProps {
   name: string;
@@ -11,7 +11,7 @@ export interface Props extends IconProps {
 const { Suspense, memo } = React;
 
 export const getIcon = (name: string) => {
-  return lazy(() => import(`./icons/${name}.js`));
+  return lazy(() => import(`./icons/${name}`));
 };
 
 export const Icon = ({ name, ...rest }: Props) => {

packages/react-feather/src/__test__/Icon.test.tsx

@@ -1,5 +1,5 @@
 import { render, waitFor, screen } from '@testing-library/react';
-import React from 'react';
+import * as React from 'react';
 
 import { Icon } from '../Icon';
 

packages/react-feather/src/icons/help-circle.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconProps } from '../types.js';
+import { IconProps } from '../types';
 
 const HelpCircle = (
   { color = 'currentColor', size = 24, ...rest }: IconProps,

packages/react-feather/src/icons/package.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconProps } from '../types.js';
+import { IconProps } from '../types';
 
 const Package = (
   { color = 'currentColor', size = 24, ...rest }: IconProps,

packages/react-lazy-named/package.json

@@ -38,7 +38,7 @@
     "rerender"
   ],
   "devDependencies": {
-    "@aw-web-design/tcm-cli": "3.1.46",
+    "@aw-web-design/tcm-cli": "3.1.50",
     "@testing-library/react": "13.1.1"
   },
   "peerDependencies": {

packages/react-textfit/package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/The-Code-Monkey/TechStack",
   "devDependencies": {
-    "@aw-web-design/tcm-cli": "3.1.46",
+    "@aw-web-design/tcm-cli": "3.1.50",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
     "babel-eslint": "10.1.0",

packages/styled-system/package.json

@@ -2,8 +2,9 @@
   "version": "3.2.0",
   "license": "MIT",
   "name": "@aw-web-design/styled-system",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "./dist/styled-system.esm.js",
+  "main": "./dist/styled-system.esm.js",
+  "type": "module",
   "files": [
     "dist",
     "src"
@@ -21,7 +22,6 @@
     "analyze": "size-limit --why"
   },
   "author": "The-Code-Monkey",
-  "module": "dist/styled-system.esm.js",
   "size-limit": [
     {
       "path": "dist/styled-system.cjs.production.min.js",
@@ -39,7 +39,7 @@
     "typescript": "4.6.4"
   },
   "dependencies": {
-    "@aw-web-design/tcm-cli": "3.1.46",
+    "@aw-web-design/tcm-cli": "3.1.50",
     "@emotion/is-prop-valid": "1.1.2",
     "@emotion/memoize": "0.7.5",
     "csstype": "3.0.11"

packages/tcm-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aw-web-design/tcm-cli",
-  "version": "3.1.48",
+  "version": "3.1.50",
   "description": "Zero-config TypeScript package development",
   "license": "MIT",
   "repository": {