@happy-dom/jest-environment 7.2.0 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@happy-dom/jest-environment",
-	"version": "7.2.0",
+	"version": "7.4.0",
 	"license": "MIT",
 	"homepage": "https://github.com/capricorn86/happy-dom/tree/master/packages/jest-environment",
 	"repository": "https://github.com/capricorn86/happy-dom",
@@ -52,7 +52,7 @@
 		"@jest/environment": "^27.5.1",
 		"@jest/fake-timers": "^27.5.1",
 		"@jest/types": "^27.5.1",
-		"happy-dom": "^7.2.0",
+		"happy-dom": "^7.4.0",
 		"jest-mock": "^27.5.1",
 		"jest-util": "^27.5.1"
 	},
@@ -63,8 +63,11 @@
 		"@angular/platform-browser": "^10.0.7",
 		"@angular/platform-browser-dynamic": "^10.0.7",
 		"@lit/reactive-element": "^1.3.1",
-		"@types/jest": "^27.4.1",
+		"@testing-library/react": "^12.1.2",
+		"@testing-library/user-event": "^14.4.3",
 		"@types/node": "^15.6.0",
+		"@types/react": "^17.0.2",
+		"@types/react-dom": "^17.0.2",
 		"@typescript-eslint/eslint-plugin": "^5.16.0",
 		"@typescript-eslint/parser": "^5.16.0",
 		"cpy": "^8.1.2",
@@ -90,5 +93,5 @@
 		"vue": "^3.2.31",
 		"zone.js": "^0.10.3"
 	},
-	"gitHead": "5ca063b2f745c250c433eeb66325613f1cbd2185"
+	"gitHead": "0ab37b11eb1ca51950761483fee664a5ea5052d2"
 }

package/test/react/React.test.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactComponent, { ReactSelectComponent } from './ReactComponent';
+import * as ReactTestingLibrary from '@testing-library/react';
+import ReactTestingLibraryUserEvent from '@testing-library/user-event';
+import { ReactDivComponent, ReactSelectComponent, ReactInputComponent } from './ReactComponents';
+
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+
+const TESTING_LIBRARY_USER = ReactTestingLibraryUserEvent.setup();
 
 describe('React', () => {
 	let appElement: Element;
@@ -15,20 +21,26 @@ describe('React', () => {
 	});
 
 	it('Tests integration.', () => {
-		ReactDOM.render(<ReactComponent />, appElement);
+		ReactDOM.render(<ReactDivComponent />, appElement);
 		expect(appElement.innerHTML).toBe('<div>Test</div>');
 	});
 
 	it('Can unmount a component.', () => {
-		ReactDOM.render(<ReactComponent />, appElement);
+		ReactDOM.render(<ReactDivComponent />, appElement);
 		ReactDOM.unmountComponentAtNode(appElement);
 		expect(appElement.innerHTML).toBe('');
 	});
 
-	it('Select tests integration.', () => {
-		ReactDOM.render(<ReactSelectComponent />, appElement);
-		expect(appElement.innerHTML).toBe(
-			'<select><option value="t1">test 1</option><option value="t2" selected="">test 2</option></select>'
-		);
+	it('Handles adding and removing event listeners.', () => {
+		ReactDOM.render(<ReactSelectComponent onChange={() => {}} />, appElement);
+	});
+
+	it('Testing library handles input', async () => {
+		const { getByPlaceholderText } = ReactTestingLibrary.render(<ReactInputComponent />);
+		const input: HTMLInputElement = getByPlaceholderText('input field') as HTMLInputElement;
+
+		await TESTING_LIBRARY_USER.type(input, 'hello');
+
+		expect(input.value).toBe('hello');
 	});
 });

package/test/react/ReactComponents.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+
+/**
+ *
+ */
+export class ReactDivComponent extends React.Component<{}, {}> {
+	public $props = {};
+
+	/**
+	 * @override
+	 */
+	public render(): React.ReactElement {
+		return <div>Test</div>;
+	}
+}
+
+const OPTIONS = [
+	{ value: 't1', label: 'test 1' },
+	{ value: 't2', label: 'test 2' }
+];
+
+/**
+ *
+ */
+export class ReactSelectComponent extends React.Component<
+	{
+		value?: string;
+		onChange?: (value: string) => void;
+	},
+	{}
+> {
+	public $props = {
+		value: OPTIONS[0].value,
+		onChange: null
+	};
+
+	/**
+	 * @override
+	 */
+	public render(): React.ReactElement {
+		return (
+			<select
+				value={this.props.value}
+				onChange={
+					this.props.onChange
+						? (event: React.ChangeEvent) =>
+								this.props.onChange((event.target as HTMLSelectElement).value)
+						: undefined
+				}
+			>
+				{OPTIONS.map((option) => (
+					<option key={option.value} value={option.value}>
+						{option.label}
+					</option>
+				))}
+			</select>
+		);
+	}
+}
+
+/**
+ *
+ */
+export class ReactInputComponent extends React.Component<{}, {}> {
+	public $props = {};
+
+	/**
+	 * @override
+	 */
+	public render(): React.ReactElement {
+		return <input placeholder="input field" />;
+	}
+}

package/test/tsconfig.json

@@ -1,25 +1,41 @@
 {
-	"extends": "../tsconfig.json",
 	"compilerOptions": {
 		"outDir": "../tmp",
-		"rootDir": "../",
+		"rootDir": ".",
 		"tsBuildInfoFile": "../tmp/.tsbuildinfo-test",
+		"target": "es2020",
+		"declaration": true,
+		"module": "CommonJS",
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"experimentalDecorators": true,
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"removeComments": false,
+		"preserveConstEnums": true,
+		"sourceMap": true,
+		"skipLibCheck": true,
+		"baseUrl": ".",
+		"composite": true,
+		"incremental": true,
 		"jsx": "react",
+		"types": [
+			"jest"
+		],
 		"lib": [
 			"es2015",
 			"es2016",
 			"es2017",
 			"dom"
-		],
-		"types": [
-			"jest"
 		]
 	},
 	"include": [
 		"@types/node",
 		"@types/jest",
-		".",
-		"../src",
-		"../src/**/*.json"
+        "@types/react",
+        "@types/react-dom",
+		"."
 	]
 }

package/test/react/ReactComponent.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-/**
- *
- */
-export default class ReactComponent extends React.Component<{}, void> {
-	/**
-	 * @override
-	 */
-	public render(): unknown {
-		return <div>Test</div>;
-	}
-}
-
-/**
- *
- */
-export class ReactSelectComponent extends React.Component<{}, void> {
-	/**
-	 * @override
-	 */
-	public render(): unknown {
-		return (
-			<>
-				<select value="t2" onChange={() => {}}>
-					<option value="t1">test 1</option>
-					<option value="t2">test 2</option>
-				</select>
-			</>
-		);
-	}
-}