@dr.pogodin/react-utils 1.33.3 → 1.34.0

package/src/shared/components/selectors/Switch/index.tsx

@@ -1,7 +1,13 @@
 import PT from 'prop-types';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
-import { type OptionsT, optionsValidator, optionValueName } from '../common';
+import {
+  type OptionsT,
+  type ValueT,
+  optionsValidator,
+  optionValueName,
+  valueValidator,
+} from '../common';
 
 import defaultTheme from './theme.scss';
 
@@ -15,10 +21,10 @@ const validThemeKeys = [
 
 type PropsT = {
   label?: React.ReactNode;
-  onChange?: (value: string) => void;
+  onChange?: (value: ValueT) => void;
   options?: Readonly<OptionsT<React.ReactNode>>;
   theme: Theme<typeof validThemeKeys>;
-  value?: string;
+  value?: ValueT;
 };
 
 const BaseSwitch: React.FunctionComponent<PropsT> = ({
@@ -81,14 +87,7 @@ BaseSwitch.propTypes = {
   onChange: PT.func,
   options: optionsValidator,
   theme: ThemedSwitch.themeType.isRequired,
-  value: PT.string,
-};
-
-BaseSwitch.defaultProps = {
-  label: undefined,
-  onChange: undefined,
-  options: [],
-  value: undefined,
+  value: valueValidator,
 };
 
 export default ThemedSwitch;

package/src/shared/components/selectors/common.ts

@@ -19,52 +19,66 @@ export const validThemeKeys = [
   'upward',
 ] as const;
 
+export type ValueT = number | string;
+
+export const valueValidator: PT.Requireable<ValueT> = PT.oneOfType([
+  PT.number.isRequired,
+  PT.string.isRequired,
+]);
+
 export type OptionT<NameT> = {
   name?: NameT | null;
-  value: string;
+  value: ValueT;
 };
 
-export type OptionsT<NameT> = Array<OptionT<NameT> | string>;
+export type OptionsT<NameT> = Array<OptionT<NameT> | ValueT>;
 
 export type PropsT<
   NameT,
   OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,
 > = {
-  filter?: (item: OptionT<NameT> | string) => boolean;
+  filter?: (item: OptionT<NameT> | ValueT) => boolean;
   label?: React.ReactNode;
   onChange?: OnChangeT;
   options?: OptionsT<NameT>;
   theme: Theme<typeof validThemeKeys>;
-  value?: string;
+  value?: ValueT;
 };
 
 export const optionValidator:
-PT.Requireable<OptionT<React.ReactNode> | string> = PT.oneOfType([
+PT.Requireable<OptionT<React.ReactNode> | ValueT> = PT.oneOfType([
   PT.shape({
     name: PT.node,
-    value: PT.string.isRequired,
+    value: valueValidator.isRequired,
   }).isRequired,
+  PT.number.isRequired,
   PT.string.isRequired,
 ]);
 
 export const optionsValidator = PT.arrayOf(optionValidator.isRequired);
 
 export const stringOptionValidator:
-PT.Requireable<OptionT<string> | string> = PT.oneOfType([
+PT.Requireable<OptionT<string> | ValueT> = PT.oneOfType([
   PT.shape({
     name: PT.string,
-    value: PT.string.isRequired,
+    value: valueValidator.isRequired,
   }).isRequired,
+  PT.number.isRequired,
   PT.string.isRequired,
 ]);
 
 export const stringOptionsValidator = PT.arrayOf(stringOptionValidator.isRequired);
 
+function isValue<T>(x: OptionT<T> | ValueT): x is ValueT {
+  const type = typeof x;
+  return type === 'number' || type === 'string';
+}
+
 /** Returns option value and name as a tuple. */
 export function optionValueName<NameT>(
-  option: OptionT<NameT> | string,
-): [string, NameT | string] {
-  return typeof option === 'string'
+  option: OptionT<NameT> | ValueT,
+): [ValueT, NameT | ValueT] {
+  return isValue(option)
     ? [option, option]
     : [option.value, option.name ?? option.value];
 }

package/src/shared/utils/jest/index.tsx

@@ -1,20 +1,15 @@
-/* global expect, jest, document */
+/* global jest, document */
 /* eslint-disable import/no-extraneous-dependencies */
 
 import mockdate from 'mockdate';
-import { type ReactElement, type ReactNode } from 'react';
+import { type ReactNode, act } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
-import TU, { act } from 'react-dom/test-utils';
 
-/* eslint-disable import/no-extraneous-dependencies */
-import Renderer from 'react-test-renderer';
-import { type ShallowRenderer, createRenderer } from 'react-test-renderer/shallow';
-/* eslint-enable import/no-extraneous-dependencies */
+import { render } from '@testing-library/react';
 
 /**
  * An alias for [act(..)](https://reactjs.org/docs/test-utils.html#act)
- * from `react-dom/test-utils`.
- * @param {function} action
+ * from `react`.
  */
 export { act };
 
@@ -86,10 +81,18 @@ export function mount(scene: ReactNode): MountedSceneT {
 
   const res: MountedSceneT = (element as unknown) as MountedSceneT;
   res.destroy = () => {
+    // NOTE: As it seems @testing-library may reset this flag to false
+    // when it is simulating user events.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
     act(() => root.unmount());
     res.remove();
   };
 
+  // NOTE: As it seems @testing-library may reset this flag to false
+  // when it is simulating user events.
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   act(() => {
     root = createRoot(res);
     root.render(scene);
@@ -97,61 +100,8 @@ export function mount(scene: ReactNode): MountedSceneT {
   return res;
 }
 
-/* OLD STUFF BELOW THIS MARK */
-
-/**
- * Renders provided ReactJS component into JSON representation of the component
- * tree, using [`react-test-renderer`](https://www.npmjs.com/package/react-test-renderer).
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the rendered tree.
- * @example
- * import { JU } from '@dr.pogodin/react-utils';
- * console.log(JU.render(<div>Example</div>));
- */
-export function render(component: ReactElement) {
-  return Renderer.create(component).toJSON();
-}
-
-/**
- * Generates a shallow render of given ReactJS component, using
- * [react-test-renderer/shallow](https://reactjs.org/docs/shallow-renderer.html)
- * and returns the result.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the shallow component's render tree.
- */
-export function shallowRender(component: ReactElement) {
-  const renderer: ShallowRenderer = createRenderer();
-  renderer.render(component);
-  return renderer.getRenderOutput();
-}
-
-/**
- * Makes a shallow snapshot test of the given ReactJS component, and also
- * returns JSON representation of the rendered component tree. Under the hood
- * it uses {@link module:JU.shallowRender shallowRender(..)} to generate
- * the render, then executes `expect(RENDER_RESULT).toMatchSnapshot()`,
- * and finally returns the `RENDER_RESULT` to the caller.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of shallow render.
- */
-export function shallowSnapshot(component: ReactElement) {
-  const res = shallowRender(component);
-  expect(res).toMatchSnapshot();
-  return res;
-}
-
-/**
- * Makes snapshot test of the given ReactJS component, and also returns JSON
- * representation of the rendered component tree. Under the hood, it uses
- * {@link module:JU.render render(..)} to render it, then executes
- * `expect(RENDER_RESULT).toMatchSnapshot()`, and then returns `RENDER_RESULT`.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON render of the component.
- */
-export function snapshot(component: ReactElement) {
-  const res = render(component);
+export function snapshot(element: React.ReactElement) {
+  const res = render(element).asFragment().firstChild;
   expect(res).toMatchSnapshot();
   return res;
 }
-
-export const simulate = TU.Simulate;

package/src/shared/utils/splitComponent.tsx

@@ -245,11 +245,7 @@ export default function splitComponent<
 
   CodeSplit.propTypes = {
     children: PT.node,
-  } as React.WeakValidationMap<ComponentPropsT>;
-
-  CodeSplit.defaultProps = {
-    children: undefined,
-  } as Partial<ComponentPropsT>;
+  } as PT.WeakValidationMap<ComponentPropsT>;
 
   return CodeSplit;
 }