fix(batching): improve batching behavior to work automatically in all cases.

.gitignore

@@ -65,3 +65,5 @@ typings/
 
 # reify cache for allowing import export in node
 .reify-cache
+
+.vscode

__tests__/Clock.test.jsx

@@ -2,6 +2,7 @@ import React, { StrictMode } from 'react';
 import { render, cleanup } from '@testing-library/react/pure';
 import sinon from 'sinon';
 import App from '../examples/clock/src/App';
+import { easyFakeTimers, easyRunTimers } from './testHelpers';
 
 describe('Clock App', () => {
   const clock = sinon.useFakeTimers();
@@ -11,6 +12,7 @@ describe('Clock App', () => {
     </StrictMode>,
   );
 
+  easyFakeTimers();
   const clearIntervalSpy = sinon.spy(global, 'clearInterval');
   /*
     Please keep the cleanup in a separate afterAll.
@@ -26,9 +28,11 @@ describe('Clock App', () => {
     expect(container).toHaveTextContent('12:00:00 AM');
 
     clock.tick(2000);
+    easyRunTimers();
     expect(container).toHaveTextContent('12:00:02 AM');
 
     clock.tick(8500);
+    easyRunTimers();
     expect(container).toHaveTextContent('12:00:10 AM');
   });
 

__tests__/Clock.test.native.jsx

@@ -5,6 +5,7 @@ import {
 } from 'react-native-testing-library';
 import sinon from 'sinon';
 import App from '../examples/native-clock/App';
+import { easyFakeTimers, easyRunTimers } from './testHelpers';
 
 describe('Clock App', () => {
   const clock = sinon.useFakeTimers();
@@ -15,7 +16,7 @@ describe('Clock App', () => {
   );
   // flush the inital didMount effect
   flushMicrotasksQueue();
-
+  easyFakeTimers();
   const clearIntervalSpy = sinon.spy(global, 'clearInterval');
 
   afterAll(() => {
@@ -27,9 +28,11 @@ describe('Clock App', () => {
     expect(getByText('12:00:00 AM')).toBeDefined();
 
     clock.tick(2000);
+    easyRunTimers();
     expect(getByText('12:00:02 AM')).toBeDefined();
 
     clock.tick(8500);
+    easyRunTimers();
     expect(getByText('12:00:10 AM')).toBeDefined();
   });
 

__tests__/Contacts.test.jsx

@@ -5,12 +5,15 @@ import {
   fireEvent,
 } from '@testing-library/react/pure';
 import App from '../examples/contacts/src/App';
+import { easyAct } from './testHelpers';
 
 describe('Contacts App', () => {
-  const { container } = render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
+  const { container } = easyAct(() =>
+    render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    ),
   );
   afterAll(cleanup);
 
@@ -21,28 +24,37 @@ describe('Contacts App', () => {
     const emailField = container.querySelector('input[name="email"]');
     const createButton = container.querySelector('button');
 
-    fireEvent.change(nameField, {
-      target: { name: 'name', value: 'Test Contact' },
+    easyAct(() => {
+      fireEvent.change(nameField, {
+        target: { name: 'name', value: 'Test Contact' },
+      });
     });
     expect(container).toMatchSnapshot('02. Create Test Contact name');
 
-    fireEvent.change(emailField, {
-      target: { name: 'email', value: '[email protected]' },
+    easyAct(() => {
+      fireEvent.change(emailField, {
+        target: { name: 'email', value: '[email protected]' },
+      });
     });
     expect(container).toMatchSnapshot(
       '03. Create Test Contact email',
     );
 
-    fireEvent.click(createButton);
+    easyAct(() => {
+      fireEvent.click(createButton);
+    });
+
     expect(container).toMatchSnapshot('04. Add Test Contact');
 
-    fireEvent.change(nameField, {
-      target: { name: 'name', value: '' },
-    });
-    fireEvent.change(emailField, {
-      target: { name: 'email', value: '' },
+    easyAct(() => {
+      fireEvent.change(nameField, {
+        target: { name: 'name', value: '' },
+      });
+      fireEvent.change(emailField, {
+        target: { name: 'email', value: '' },
+      });
+      fireEvent.click(createButton);
     });
-    fireEvent.click(createButton);
     expect(container).toMatchSnapshot('05. Add Placeholder Contact');
   });
 
@@ -54,7 +66,9 @@ describe('Contacts App', () => {
     display = container.querySelector('.contact-display');
     editButton = display.querySelector('.zmdi-edit');
 
-    fireEvent.click(editButton);
+    easyAct(() => {
+      fireEvent.click(editButton);
+    });
     expect(container).toMatchSnapshot(
       '06. Switch Test Contact to Edit Mode',
     );
@@ -63,18 +77,24 @@ describe('Contacts App', () => {
     const nameField = editor.querySelector('input[name="name"]');
     const cancelButton = editor.querySelector('.zmdi-close');
 
-    fireEvent.change(nameField, {
-      target: { name: 'name', value: 'Edited Test Contact' },
+    easyAct(() => {
+      fireEvent.change(nameField, {
+        target: { name: 'name', value: 'Edited Test Contact' },
+      });
     });
     expect(container).toMatchSnapshot('07. Edit Test Contact name');
 
-    fireEvent.click(cancelButton);
+    easyAct(() => {
+      fireEvent.click(cancelButton);
+    });
     expect(container).toMatchSnapshot('08. Cancel Test Contact edit');
 
     display = container.querySelector('.contact-display');
     editButton = display.querySelector('.zmdi-edit');
 
-    fireEvent.click(editButton);
+    easyAct(() => {
+      fireEvent.click(editButton);
+    });
     expect(container).toMatchSnapshot(
       '09. Switch Test Contact to edit Mode',
     );
@@ -83,15 +103,19 @@ describe('Contacts App', () => {
     const emailField = editor.querySelector('input[name="email"]');
     const saveButton = editor.querySelector('.zmdi-save');
 
-    fireEvent.change(emailField, {
-      target: {
-        name: 'email',
-        value: '[email protected]',
-      },
+    easyAct(() => {
+      fireEvent.change(emailField, {
+        target: {
+          name: 'email',
+          value: '[email protected]',
+        },
+      });
     });
     expect(container).toMatchSnapshot('10. Edit Test Contact email');
 
-    fireEvent.click(saveButton);
+    easyAct(() => {
+      fireEvent.click(saveButton);
+    });
     expect(container).toMatchSnapshot('11. Save Test Contact edit');
   });
 
@@ -100,7 +124,9 @@ describe('Contacts App', () => {
       '.contact-display .zmdi-delete',
     )[1];
 
-    fireEvent.click(deleteButton);
+    easyAct(() => {
+      fireEvent.click(deleteButton);
+    });
     expect(container).toMatchSnapshot(
       '12. Delete Placeholder Contact',
     );
@@ -109,7 +135,9 @@ describe('Contacts App', () => {
       '.contact-display .zmdi-delete',
     );
 
-    fireEvent.click(deleteButton);
+    easyAct(() => {
+      fireEvent.click(deleteButton);
+    });
     expect(container).toMatchSnapshot('13. Delete Test Contact');
   });
 });

__tests__/TodoMVC.test.jsx

@@ -5,6 +5,7 @@ import {
   fireEvent,
 } from '@testing-library/react/pure';
 import App from '../examples/todo-mvc/src/App';
+import { easyAct } from './testHelpers';
 
 describe('TodoMVC App', () => {
   const { container } = render(
@@ -19,43 +20,55 @@ describe('TodoMVC App', () => {
 
     const input = container.querySelector('.new-todo');
 
-    fireEvent.keyUp(input, {
-      keyCode: 13,
-      target: { value: 'Test Todo' },
+    easyAct(() => {
+      fireEvent.keyUp(input, {
+        keyCode: 13,
+        target: { value: 'Test Todo' },
+      });
     });
     expect(container).toMatchSnapshot('02. Add Test Todo');
 
-    fireEvent.keyUp(input, {
-      keyCode: 13,
-      target: { value: 'Other Todo' },
+    easyAct(() => {
+      fireEvent.keyUp(input, {
+        keyCode: 13,
+        target: { value: 'Other Todo' },
+      });
     });
     expect(container).toMatchSnapshot('03. Add Other Todo');
 
-    fireEvent.keyUp(input, {
-      keyCode: 27,
-      target: { value: 'Final Tod' },
-    });
-    fireEvent.keyUp(input, {
-      keyCode: 13,
-      target: { value: 'Final Todo' },
+    easyAct(() => {
+      fireEvent.keyUp(input, {
+        keyCode: 27,
+        target: { value: 'Final Tod' },
+      });
+      fireEvent.keyUp(input, {
+        keyCode: 13,
+        target: { value: 'Final Todo' },
+      });
     });
     expect(container).toMatchSnapshot('04. Add Final Todo');
   });
 
   test('should toggle todo status', () => {
     const toggles = container.querySelectorAll('.todo-list .toggle');
 
-    fireEvent.click(toggles[0]);
+    easyAct(() => {
+      fireEvent.click(toggles[0]);
+    });
     expect(container).toMatchSnapshot(
       '05. Toggle Test Todo to completed',
     );
 
-    fireEvent.click(toggles[1]);
+    easyAct(() => {
+      fireEvent.click(toggles[1]);
+    });
     expect(container).toMatchSnapshot(
       '06. Toggle Other Todo to completed',
     );
 
-    fireEvent.click(toggles[0]);
+    easyAct(() => {
+      fireEvent.click(toggles[0]);
+    });
     expect(container).toMatchSnapshot(
       '07. Toggle Test Todo to active',
     );
@@ -70,13 +83,19 @@ describe('TodoMVC App', () => {
     );
     const allFilter = container.querySelector('button[value="all"]');
 
-    fireEvent.click(completedFilter);
+    easyAct(() => {
+      fireEvent.click(completedFilter);
+    });
     expect(container).toMatchSnapshot('08. Filter completed');
 
-    fireEvent.click(activeFilter);
+    easyAct(() => {
+      fireEvent.click(activeFilter);
+    });
     expect(container).toMatchSnapshot('09. Filter active');
 
-    fireEvent.click(allFilter);
+    easyAct(() => {
+      fireEvent.click(allFilter);
+    });
     expect(container).toMatchSnapshot('10. Filter all');
   });
 
@@ -85,24 +104,32 @@ describe('TodoMVC App', () => {
       '.clear-completed',
     );
 
-    fireEvent.click(clearCompleted);
+    easyAct(() => {
+      fireEvent.click(clearCompleted);
+    });
     expect(container).toMatchSnapshot('11. Clear completed');
   });
 
   test('should toggle all todo state at once', () => {
     const toggleAll = container.querySelector('.toggle-all');
 
-    fireEvent.click(toggleAll);
+    easyAct(() => {
+      fireEvent.click(toggleAll);
+    });
     expect(container).toMatchSnapshot('12. Toggle all to completed');
 
-    fireEvent.click(toggleAll);
+    easyAct(() => {
+      fireEvent.click(toggleAll);
+    });
     expect(container).toMatchSnapshot('13. Toggle all to active');
   });
 
   test('should delete todo', () => {
     const deleter = container.querySelector('.todo-list .destroy');
 
-    fireEvent.click(deleter);
+    easyAct(() => {
+      fireEvent.click(deleter);
+    });
     expect(container).toMatchSnapshot('14. Delete Test Todo');
   });
 });

__tests__/autoEffect.test.jsx

@@ -7,6 +7,7 @@ import {
   clearEffect,
   // eslint-disable-next-line import/no-unresolved
 } from '@risingstack/react-easy-state';
+import { easyAct } from './testHelpers';
 
 describe('autoEffect', () => {
   afterEach(cleanup);
@@ -44,7 +45,9 @@ describe('autoEffect', () => {
     expect(container).toHaveTextContent('Online Store');
     expect(documentTitle).toBe('Online Store');
 
-    app.name = 'Learning Platform';
+    easyAct(() => {
+      app.name = 'Learning Platform';
+    });
     expect(container).toHaveTextContent('Learning Platform');
     expect(documentTitle).toBe('Learning Platform');
 
@@ -77,7 +80,9 @@ describe('autoEffect', () => {
     expect(container).toHaveTextContent('Awesome Store');
     expect(documentTitle).toBe('Awesome Store');
 
-    app.name = 'Page';
+    easyAct(() => {
+      app.name = 'Page';
+    });
     expect(container).toHaveTextContent('Awesome Page');
     expect(documentTitle).toBe('Awesome Page');
   });