Fixes for jest transpilation issues. (https://github.com/woocommerce/woocommerce-blocks/pull/10788)

* Fix bug where is-plain-obj is not transpiled by Jest, update lock.
* Update packages.
* Mock useSelect for a handful of RichText selectors in test.
* Resolve react to single version to avoid invalid hook errors.
* Patch trim-html locally to avoid a bug in the released npm source.
* Mock out resizeObserver to avoid https://github.com/FezVrasta/react-resize-aware/issues/58
* Don't transpile config package: https://github.com/node-config/node-config/issues/628

plugins/woocommerce-blocks/assets/js/base/components/read-more/trim-html.js

@@ -0,0 +1,157 @@
+// Copy-pasted from https://github.com/brankosekulic/trimHtml/blob/master/index.js
+// the published npm version of this code contains a bug that causes it throw exceptions.
+export function trimHtml( html, options ) {
+	options = options || {};
+
+	const limit = options.limit || 100,
+		preserveTags =
+			typeof options.preserveTags !== 'undefined'
+				? options.preserveTags
+				: true,
+		wordBreak =
+			typeof options.wordBreak !== 'undefined'
+				? options.wordBreak
+				: false,
+		suffix = options.suffix || '...',
+		moreLink = options.moreLink || '',
+		moreText = options.moreText || '»',
+		preserveWhiteSpace = options.preserveWhiteSpace || false;
+
+	const arr = html
+		.replace( /</g, '\n<' )
+		.replace( />/g, '>\n' )
+		.replace( /\n\n/g, '\n' )
+		.replace( /^\n/g, '' )
+		.replace( /\n$/g, '' )
+		.split( '\n' );
+
+	let sum = 0,
+		row,
+		cut,
+		add,
+		rowCut,
+		tagMatch,
+		tagName,
+		// eslint-disable-next-line prefer-const
+		tagStack = [],
+		more = false;
+
+	for ( let i = 0; i < arr.length; i++ ) {
+		row = arr[ i ];
+
+		// count multiple spaces as one character
+		if ( ! preserveWhiteSpace ) {
+			rowCut = row.replace( /[ ]+/g, ' ' );
+		} else {
+			rowCut = row;
+		}
+
+		if ( ! row.length ) {
+			continue;
+		}
+
+		const charArr = getCharArr( rowCut );
+
+		if ( row[ 0 ] !== '<' ) {
+			if ( sum >= limit ) {
+				row = '';
+			} else if ( sum + charArr.length >= limit ) {
+				cut = limit - sum;
+
+				if ( charArr[ cut - 1 ] === ' ' ) {
+					while ( cut ) {
+						cut -= 1;
+						if ( charArr[ cut - 1 ] !== ' ' ) {
+							break;
+						}
+					}
+				} else {
+					add = charArr.slice( cut ).indexOf( ' ' );
+
+					// break on halh of word
+					if ( ! wordBreak ) {
+						if ( add !== -1 ) {
+							cut += add;
+						} else {
+							cut = row.length;
+						}
+					}
+				}
+
+				row = charArr.slice( 0, cut ).join( '' ) + suffix;
+
+				if ( moreLink ) {
+					row +=
+						'<a href="' +
+						moreLink +
+						'" style="display:inline">' +
+						moreText +
+						'</a>';
+				}
+
+				sum = limit;
+				more = true;
+			} else {
+				sum += charArr.length;
+			}
+		} else if ( ! preserveTags ) {
+			row = '';
+		} else if ( sum >= limit ) {
+			tagMatch = row.match( /[a-zA-Z]+/ );
+			tagName = tagMatch ? tagMatch[ 0 ] : '';
+
+			if ( tagName ) {
+				if ( row.substring( 0, 2 ) !== '</' ) {
+					tagStack.push( tagName );
+					row = '';
+				} else {
+					while (
+						tagStack[ tagStack.length - 1 ] !== tagName &&
+						tagStack.length
+					) {
+						tagStack.pop();
+					}
+
+					if ( tagStack.length ) {
+						row = '';
+					}
+
+					tagStack.pop();
+				}
+			} else {
+				row = '';
+			}
+		}
+
+		arr[ i ] = row;
+	}
+
+	return {
+		html: arr.join( '\n' ).replace( /\n/g, '' ),
+		more,
+	};
+}
+
+// count symbols like one char
+function getCharArr( rowCut ) {
+	// eslint-disable-next-line prefer-const
+	let charArr = [],
+		subRow,
+		match,
+		char;
+
+	for ( let i = 0; i < rowCut.length; i++ ) {
+		subRow = rowCut.substring( i );
+		match = subRow.match( /^&[a-z0-9#]+;/ );
+
+		if ( match ) {
+			char = match[ 0 ];
+			charArr.push( char );
+			i += char.length - 1;
+		} else {
+			charArr.push( rowCut[ i ] );
+		}
+	}
+
+	return charArr;
+}

plugins/woocommerce-blocks/assets/js/base/components/read-more/utils.ts

@@ -1,8 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { trimHtml } from './trim-html';
+
 /**
  * External dependencies
  */
-import trimHtml from 'trim-html';
-
 type Markers = {
 	end: number;
 	middle: number;

plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js

@@ -32,6 +32,11 @@ import OrderSummarySubtotalBlock from '../inner-blocks/cart-order-summary-subtot
 import OrderSummaryShippingBlock from '../inner-blocks/cart-order-summary-shipping/frontend';
 import OrderSummaryTaxesBlock from '../inner-blocks/cart-order-summary-taxes/frontend';
 
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useResizeObserver: jest.fn().mockReturnValue( [ null, { width: 0 } ] ),
+} ) );
+
 const CartBlock = ( {
 	attributes = {
 		showRateAfterTaxName: false,

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js

@@ -7,7 +7,31 @@ import { render, queryByText } from '@testing-library/react';
  * Internal dependencies
  */
 import { Edit } from '../edit';
-const blockSettingsMock = jest.requireMock( '@woocommerce/block-settings' );
+
+jest.mock( '@wordpress/data', () => ( {
+	...jest.requireActual( '@wordpress/data' ),
+	useSelect: jest.fn().mockImplementation( ( fn ) => {
+		const select = () => {
+			return {
+				getSelectionStart: () => ( {
+					clientId: null,
+				} ),
+				getSelectionEnd: () => ( {
+					clientId: null,
+				} ),
+				getFormatTypes: () => [],
+			};
+		};
+
+		if ( typeof fn === 'function' ) {
+			return fn( select );
+		}
+
+		return {
+			isCaretWithinFormattedText: () => false,
+		};
+	} ),
+} ) );
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	...jest.requireActual( '@wordpress/block-editor' ),
@@ -21,6 +45,8 @@ jest.mock( '@woocommerce/block-settings', () => ( {
 	TERMS_URL: '/terms-and-conditions',
 } ) );
 
+const blockSettingsMock = jest.requireMock( '@woocommerce/block-settings' );
+
 describe( 'Edit', () => {
 	it( 'Renders a checkbox if the checkbox attribute is true', async () => {
 		const { container } = render(

plugins/woocommerce-blocks/tests/e2e-jest/config/jest.config.js

@@ -35,6 +35,9 @@ module.exports = {
 		// Ignore all the files that have utils in the name
 		'utils',
 	],
-	transformIgnorePatterns: [ 'node_modules/(?!(woocommerce)/)' ],
+	transformIgnorePatterns: [
+		'node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)',
+		'node_modules/@woocommerce/e2e-utils/node_modules/config',
+	],
 	testMatch: [ '**/?(*.)+(spec|test).[jt]s?(x)' ],
 };

plugins/woocommerce-blocks/tests/js/jest.config.json

@@ -30,7 +30,9 @@
 		"@woocommerce/blocks-test-utils": "tests/utils",
 		"@woocommerce/types": "assets/js/types",
 		"@woocommerce/utils": "assets/js/utils",
-		"@woocommerce/interactivity": "assets/js/interactivity"
+		"@woocommerce/interactivity": "assets/js/interactivity",
+		"^react$": "<rootDir>/node_modules/react",
+		"^react-dom$": "<rootDir>/node_modules/react-dom"
 	},
 	"setupFiles": [
 		"@wordpress/jest-preset-default/scripts/setup-globals.js",
@@ -45,7 +47,7 @@
 		"<rootDir>/node_modules/",
 		"<rootDir>/vendor/"
 	],
-	"transformIgnorePatterns": [ "node_modules/(?!(simple-html-tokenizer)/)" ],
+	"transformIgnorePatterns": [ "node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)" ],
 	"testEnvironment": "jsdom",
 	"preset": "@wordpress/jest-preset-default",
 	"transform": {