@tramvai/test-react 1.50.1 → 1.51.0

package/README.md

@@ -14,6 +14,20 @@ If you are using jest for testing, consider to add a library [@testing-library/j
 npm i --save-dev @tramvai/test-react
 ```
 
+## Explanation
+
+### act
+
+Based on the React [act test helper](https://reactjs.org/docs/test-utils.html#act) that is used to perform rerender component after start changes.
+
+Put you actions that will update React state inside `act` function in order to check result render in the next code.
+
+:::warning
+
+Current wrapper should be awaited in tests to execute some additional internal steps
+
+:::
+
 ## How to
 
 ### Test component

package/lib/index.es.js

@@ -5,6 +5,7 @@ import { Provider } from '@tramvai/state';
 import { DIContext } from '@tramvai/react';
 import { Provider as Provider$1 } from '@tinkoff/router';
 import { createMockContext, createMockRouter } from '@tramvai/test-mocks';
+import { waitRaf } from '@tramvai/test-jsdom';
 import { renderHook, act as act$1 } from '@testing-library/react-hooks';
 
 const testComponent = (element, { providers, initialState, store, stores, di, context = createMockContext({ initialState, providers, di, store, stores }), currentRoute, currentUrl, router = createMockRouter({ currentRoute, currentUrl }), renderOptions, } = {}) => {
@@ -15,7 +16,16 @@ const testComponent = (element, { providers, initialState, store, stores, di, co
     return {
         render: renderResults,
         rerender: (el) => renderResults.rerender(React.createElement(Wrapper, null, el)),
-        act,
+        act: (callback) => {
+            return act(async () => {
+                await callback();
+                if (typeof window.requestAnimationFrame !== 'undefined') {
+                    // as some of the state changes in browsers uses requestAnimationFrame to batch updates in single one
+                    // but in tests requestAnimationFrame should mostly should be resolved manually
+                    await waitRaf();
+                }
+            });
+        },
         fireEvent,
         context,
         router,

package/lib/index.js

@@ -8,6 +8,7 @@ var state = require('@tramvai/state');
 var react$1 = require('@tramvai/react');
 var router = require('@tinkoff/router');
 var testMocks = require('@tramvai/test-mocks');
+var testJsdom = require('@tramvai/test-jsdom');
 var reactHooks = require('@testing-library/react-hooks');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,7 +23,16 @@ const testComponent = (element, { providers, initialState, store, stores, di, co
     return {
         render: renderResults,
         rerender: (el) => renderResults.rerender(React__default["default"].createElement(Wrapper, null, el)),
-        act: react.act,
+        act: (callback) => {
+            return react.act(async () => {
+                await callback();
+                if (typeof window.requestAnimationFrame !== 'undefined') {
+                    // as some of the state changes in browsers uses requestAnimationFrame to batch updates in single one
+                    // but in tests requestAnimationFrame should mostly should be resolved manually
+                    await testJsdom.waitRaf();
+                }
+            });
+        },
         fireEvent: react.fireEvent,
         context,
         router: router$1,

package/lib/testComponent.d.ts

@@ -15,7 +15,7 @@ declare type Options = OptionsDi & OptionsContext & OptionsRouter & {
 export declare const testComponent: (element: React.ReactElement, { providers, initialState, store, stores, di, context, currentRoute, currentUrl, router, renderOptions, }?: Options) => {
     render: import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement>;
     rerender: (el: React.ReactElement) => void;
-    act: typeof import("react-dom/test-utils").act;
+    act: (callback: () => Promise<void> | void) => Promise<undefined>;
     fireEvent: import("@testing-library/react").FireFunction & import("@testing-library/react").FireObject;
     context: import("@tramvai/tokens-common").ConsumerContext;
     router: AbstractRouter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/test-react",
-  "version": "1.50.1",
+  "version": "1.51.0",
   "description": "",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -20,11 +20,12 @@
   "dependencies": {
     "@testing-library/react": "^11.2.6",
     "@testing-library/react-hooks": "^5.1.2",
-    "@tinkoff/router": "0.1.66",
-    "@tramvai/react": "1.50.1",
-    "@tramvai/state": "1.50.1",
-    "@tramvai/test-mocks": "1.50.1",
-    "@tramvai/tokens-common": "1.50.1",
+    "@tinkoff/router": "0.1.67",
+    "@tramvai/react": "1.51.0",
+    "@tramvai/state": "1.51.0",
+    "@tramvai/test-jsdom": "1.51.0",
+    "@tramvai/test-mocks": "1.51.0",
+    "@tramvai/tokens-common": "1.51.0",
     "react-test-renderer": "^17.0.2",
     "tslib": "^2.0.3"
   },