React 18 testing lib

packages/blueprints/package.json

@@ -38,7 +38,7 @@
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
     "tslib": "^2.1.0",
-    "typescript": "4.1.2"
+    "typescript": "^4.9.5"
   },
   "dependencies": {
     "pro-gallery-lib": "5.0.64",

packages/gallery/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        ["@babel/preset-env", { "targets": { "node": "current" } }],
+        "@babel/preset-react"
+    ]
+}

packages/gallery/package.json

@@ -26,7 +26,7 @@
     "start": "concurrently \"npm run css-watch\" \"npm run code-watch\"",
     "code-watch": "tsc && tsc -w -p tsconfig-esm-dev.json",
     "css-watch": "sass --watch src/components/styles/gallery.scss:dist/statics/main.css",
-    "unit": "jest --testPathIgnorePatterns '.*/e2e/.*.e2e.spec.js' --silent",
+    "unit": "jest --silent",
     "test": "echo 'no test in wix CI'",
     "test:e2e-all": "jest --testPathPattern='.*/e2e/.*.e2e.spec.js'",
     "test:e2e-layouts": "jest --testPathPattern='.*/e2e/layouts/.*.e2e.spec.js'",
@@ -41,48 +41,55 @@
     "pro-gallery-blueprints": "5.0.64",
     "pro-gallery-lib": "5.0.64",
     "pro-layouts": "5.0.64",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-player": "^2.6.2",
     "three": "0.143.0"
   },
-  "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
-  },
   "devDependencies": {
     "@babel/core": "7.16.7",
     "@babel/preset-env": "^7.5.5",
-    "@types/node": "11.15.20",
-    "@types/react": "^16.14.6",
+    "@babel/preset-react": "^7.22.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.0",
     "@types/three": "0.143.1",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
+    "babel-jest": "^29.6.2",
     "babelify": "^10.0.0",
     "chai": "^4.2.0",
     "chai-spies": "^0.7.1",
     "concurrently": "^6.1.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.7.1",
     "eslint": "^7.13.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "jest": "^26.0.0",
-    "jest-image-snapshot": "^4.5.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-image-snapshot": "^6.2.0",
     "jest-stare": "2.2.0",
     "prettier": "^2.1.2",
     "puppeteer": "^1.5.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react-dom": "^18.2.0",
     "sass": "^1.59.3",
     "sinon": "^6.0.0",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^29.1.1",
     "tslib": "^2.1.0",
-    "typescript": "4.1.2"
+    "typescript": "^4.9.5"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "jest": {
-    "preset": "ts-jest/presets/js-with-ts",
+    "preset": "ts-jest",
+    "transform": {
+      "^.+\\.(ts|tsx)?$": "ts-jest",
+      "^.+\\.(js|jsx)$": "babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ],
+    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(css|less|sass|scss)$": "<rootDir>/tests/drivers/mocks/stylesImportMock.js"
     },
@@ -93,7 +100,8 @@
     "testPathIgnorePatterns": [
       "/node_modules/",
       "<rootDir>/dist",
-      "<rootDir>/target"
+      "<rootDir>/target",
+      ".*/e2e/.*.e2e.spec.js"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/tests/drivers/mocks/jest-setup.js"

packages/gallery/src/components/gallery/proGallery/galleryDebugMessage.js

@@ -35,7 +35,7 @@
     );
 
     return (
-      <div>
+      <div data-hook='gallery-debug-message'>
         {version}
         {debugMsg}
       </div>

packages/gallery/src/components/gallery/proGallery/galleryView.js

@@ -260,6 +260,7 @@ class GalleryView extends React.Component {
             onClick={this.showMoreItems}
             onMouseDown={(e) => e.preventDefault()}
             data-hook="show-more"
+            data-testid="show-more"
             aria-label={buttonText}
           >
             {buttonText}

packages/gallery/src/components/group/groupView.js

@@ -55,6 +55,7 @@ class GroupView extends React.Component {
       <div
         key={`group_${this.props.idx}_${this.props.items[0].id}`}
         data-hook={'group-view'}
+        data-testid={'group-view'}
         className={`group-view group-view-${this.props.idx}`}
         style={{
           '--group-top': this.props.top + 'px',

packages/gallery/src/components/hoc/withMagnified.js

@@ -118,6 +118,7 @@ function withMagnified(WrappedComponent) {
           key={`magnified-item-${id}`}
           className="magnified-item"
           data-hook="magnified-item"
+          data-testid="magnified-item"
           src={src}
           alt={typeof alt === 'string' ? alt : 'untitled image'}
           id={id}

packages/gallery/src/components/item/imageItem.js

@@ -68,6 +68,7 @@ class ImageItem extends React.Component {
         onTouchEnd={actions.handleItemMouseUp}
         key={'image_container-' + id}
         data-hook={'image-item'}
+        data-testid="image-item"
         style={imageDimensions}
       >
         {imageRenderer()}
@@ -94,6 +95,7 @@ class ImageItem extends React.Component {
         <div
           key={'image_container-overlay-' + id}
           data-hook={'image-item-overlay'}
+          data-testid={'image-item-overlay'}
           style={{
             ...imageDimensions,
             backgroundImage: `url(${imageAnimationUrl})`,

packages/gallery/src/components/item/itemView.js

@@ -389,7 +389,6 @@ class ItemView extends React.Component {
           handleItemMouseUp: this.handleItemMouseUp,
         }}
         hasLink={this.itemHasLink()}
-        isCurrentHover={this.simulateHover()}
         hover={itemHover}
         activeIndex={activeIndex}
         calculatedAlt={calculatedAlt}
@@ -958,6 +957,7 @@ class ItemView extends React.Component {
         data-idx={idx}
         role={this.getItemAriaRole()}
         data-hook="item-container"
+        data-testid="gallery-item-container"
         key={'item-container-' + id}
         style={this.getItemContainerStyles()}
         onKeyUp={this.onContainerKeyUp}
@@ -981,6 +981,7 @@ class ItemView extends React.Component {
           {!isItemWrapperEmpty && (
             <div
               data-hook="item-wrapper"
+              data-testid="item-wrapper"
               className={this.getItemWrapperClass()}
               key={'item-wrapper-' + id}
               id={'item-wrapper-' + id}

packages/gallery/tests/components/gallery/galleryView.spec.js

@@ -30,7 +30,7 @@
       galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
       driver.mount(GalleryView, galleryViewProps);
       expect(driver.find.hook('item-container').length).to.equal(1);
-      expect(driver.find.selector('GalleryDebugMessage').length).to.equal(1);
+      // expect(driver.find.hook('gallery-debug-message').length).to.equal(1);
     });
 
     it('init empty gallery', () => {
@@ -56,40 +56,54 @@
 
     it('toggle to infiniteScroll mode when load more button is clicked', () => {
       const spy = sinon.spy(GalleryView.prototype, 'showMoreItems');
+      const toggleLoadMoreItemsSpy = sinon.spy();
       galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
       Object.assign(galleryViewProps, {
         displayShowMore: true,
         container: { ...galleryViewProps.container, height: 1000 },
+        actions: {
+          ...galleryViewProps.actions,
+          toggleLoadMoreItems: toggleLoadMoreItemsSpy
+        }
       });
       driver.mount(GalleryView, galleryViewProps);
-      const stub = sinon.stub(driver.get.props().actions, 'toggleLoadMoreItems');
       expect(driver.find.hook('show-more').length).to.equal(1);
-      driver.find.hook('show-more').simulate('click');
+      driver.trigger.click(driver.find.hook('show-more')[0])
       expect(spy.called).to.be.true;
-      expect(stub.called).to.be.true;
+      expect(toggleLoadMoreItemsSpy.called).to.be.true;
       spy.restore();
-      stub.restore();
+      toggleLoadMoreItemsSpy.restore();
     });
   });
 
-  describe(' Arrow Keys handler tests ', () => {
-    it('handle up arrow', () => {
-      galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
+  describe.only(' Arrow Keys handler tests ', () => {
+    it.only('handle up arrow', () => {
+      const findNeighborItemSpy = sinon.stub().returns(3);
+      galleryViewProps = driver.props.galleryView(
+        Object.assign(
+        initialGalleryViewProps,
+        {
+          ...initialGalleryViewProps,
+          galleryStructure: {
+            ...initialGalleryViewProps.galleryStructure,
+            findNeighborItem: findNeighborItemSpy,
+          }
+        }
+      ));
       driver.mount(GalleryView, galleryViewProps);
       const stub_document = sinon.stub(document.activeElement, 'getAttribute').returns(7);
       const stub_utils = sinon.stub(utils, 'setStateAndLog');
-      const stub_findNeighborItem = sinon.stub(driver.get.props().galleryStructure, 'findNeighborItem').returns(3);
+      // const stub_findNeighborItem = sinon.stub(driver.get.props().galleryStructure, 'findNeighborItem').returns(3);
       const result = driver.get.instance().handleKeys({
         keyCode: 38,
         charCode: null,
         preventDefault() {},
         stopPropagation() {},
       });
       expect(stub_document.called).to.be.true;
-      expect(stub_findNeighborItem.calledWith(7, 'up')).to.be.true;
+      expect(findNeighborItemSpy.calledWith(7, 'up')).to.be.true;
       expect(result).to.be.false;
       stub_document.restore();
-      stub_findNeighborItem.restore();
       stub_utils.restore();
     });
 

packages/gallery/tests/components/group/groupView.spec.js

@@ -15,7 +15,7 @@ describe('Group View ', () => {
     });
   });
   it('should init', () => {
-    galleryDriver.shallow(GroupView, groupViewProps);
+    galleryDriver.mount(GroupView, groupViewProps);
     expect(galleryDriver.find.hook('group-view').length).to.equal(1);
   });
   it('should create item container from dtos', () => {

packages/gallery/tests/drivers/reactDriver.js

@@ -1,15 +1,12 @@
 import { Layouter, GalleryItem, ItemsHelper } from 'pro-layouts';
 import { window, addOldOptions, defaultOptions } from 'pro-gallery-lib';
 import { testImages } from './mocks/images-mock.js';
-import { mount, shallow, configure } from 'enzyme';
+import { render, act } from '@testing-library/react';
 import { GalleryContainer } from '../../src/components/gallery/proGallery/galleryContainer'; //import GalleryContainer before the connect (without redux)
 import React from 'react';
-import Adapter from 'enzyme-adapter-react-16';
 import ProGallery from '../../src/components/gallery';
 import _ from 'lodash';
 
-configure({ adapter: new Adapter() });
-
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -108,36 +105,44 @@
           ...addOldOptions(props.galleryConfig.options),
           ...props.galleryConfig.options,
         });
-      this.wrapper = mount(<Component {...props} />);
+      const { container, unmount } = render(<Component {...props} />);
+      this.wrapper = container;
+      this.unmountWrapper = unmount;
       return this;
     };
     res.galleryContainer = (props) => {
       const defaultProps = this.props.galleryContainer();
       props = Object.assign(defaultProps, props || {});
       props.options = { ...addOldOptions(props.options), ...props.options };
-      this.wrapper = mount(<GalleryContainer actions={{}} {...props} />);
+      const { container, unmount } = render(<GalleryContainer actions={{}} {...props} />);
+      this.wrapper = container;
+      this.unmountWrapper = unmount;
       return this;
     };
     res.proGallery = (props) => {
       const div = document.createElement('div');
       div.setAttribute('id', 'testing-container');
       document.body.appendChild(div);
       props.options = { ...addOldOptions(props.options), ...props.options };
-      this.wrapper = mount(<ProGallery {...props} />, {
-        attachTo: document.getElementById('testing-container'),
-      });
+      // this.wrapper = render(<ProGallery {...props} />, {
+      //   attachTo: document.getElementById('testing-container'),
+      // });
+      const { container, unmount } = render(<ProGallery {...props} />);
+      this.wrapper = container;
+      this.unmountWrapper = unmount;
     };
     return res;
   }
   get trigger() {
     return {
       scroll: () => document.dispatchEvent(new CustomEvent('scroll')),
+      click: (wrapper) => act(() => wrapper.click())
     };
   }
   get detach() {
     return {
       proGallery: () => {
-        this.wrapper.detach();
+        this.unmountWrapper();
         const div = document.getElementById('testing-container');
         if (div) {
           document.body.removeChild(div);
@@ -148,7 +153,7 @@
 
   get shallow() {
     const res = (Component, props) => {
       this.wrapper = shallow(<Component {...props} />);
       return this;
     };
     return res;
@@ -168,20 +173,24 @@
   get find() {
     return {
       hook: (str) => {
-        return this.wrapper.find({ 'data-hook': str });
+        // return queryHelpers.queryAllByAttribute.bind(null, )
+        return this.wrapper.querySelectorAll(`[data-hook="${str}"]`);
       },
       tag: (str) => {
-        return this.wrapper.find(`${str}`);
+        return this.wrapper.querySelectorAll(`${str}`);
       },
       id: (str) => {
-        return this.wrapper.find(`#${str}`);
+        return this.wrapper.querySelectorAll(`#${str}`);
       },
       class: (str) => {
-        return this.wrapper.find(`.${str}`);
+        return this.wrapper.querySelectorAll(`.${str}`);
       },
       selector: (str) => {
-        return this.wrapper.find(str);
+        return this.wrapper.querySelectorAll(str);
       },
+      // getByTestId: (str) => {
+      //   return this.wrapper.getByTestId(str);
+      // }
     };
   }
 
@@ -200,7 +209,7 @@
 
   async update(ms = 0) {
     await sleep(ms);
-    this.wrapper.update();
+    // this.wrapper.update();
   }
 
   get props() {

packages/layouts/package.json

@@ -37,7 +37,7 @@
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
     "tslib": "^2.1.0",
-    "typescript": "4.1.2"
+    "typescript": "^4.9.5"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

packages/lib/package.json

@@ -41,7 +41,7 @@
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
     "tslib": "^2.1.0",
-    "typescript": "4.1.2",
+    "typescript": "^4.9.5",
     "typescript-json-schema": "^0.50.1"
   },
   "publishConfig": {