fix(batch): replace unstable batch api with custom queue

__tests__/Clock.test.js

@@ -1,6 +1,5 @@
 import React, { StrictMode } from 'react'
-import { act } from 'react-dom/test-utils'
-import { render, cleanup } from '@testing-library/react/pure'
+import { render, cleanup, act } from '@testing-library/react/pure'
 import sinon from 'sinon'
 import App from '../examples/clock/src/App'
 

__tests__/Contacts.test.js

@@ -41,9 +41,7 @@ describe('Contacts App', () => {
   })
 
   test('should edit contact', () => {
-    let display,
-      editor,
-      editButton
+    let display, editor, editButton
 
     display = container.querySelector('.contact-display')
     editButton = display.querySelector('.zmdi-edit')

__tests__/batching.test.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import { render, cleanup } from '@testing-library/react/pure'
+import React, { Component } from 'react'
+import { render, cleanup, act } from '@testing-library/react/pure'
 import { view, store, batch } from 'react-easy-state'
 
 describe('batching', () => {
@@ -13,6 +13,31 @@ describe('batching', () => {
       return <div>{person.name}</div>
     })
 
+    const { container } = render(<MyComp />)
+    expect(renderCount).toBe(1)
+    expect(container).toHaveTextContent('Bob')
+    act(() =>
+      batch(() => {
+        person.name = 'Ann'
+        person.name = 'Rick'
+      })
+    )
+    expect(container).toHaveTextContent('Rick')
+    expect(renderCount).toBe(2)
+  })
+
+  test('should batch state changes inside a batch() wrapper in a class component', () => {
+    let renderCount = 0
+    const person = store({ name: 'Bob' })
+    const MyComp = view(
+      class extends Component {
+        render () {
+          renderCount++
+          return <div>{person.name}</div>
+        }
+      }
+    )
+
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
@@ -24,7 +49,7 @@ describe('batching', () => {
     expect(renderCount).toBe(2)
   })
 
-  test('should work with nested batch() calls', () => {
+  test('should not batch state changes outside a batch() wrapper', () => {
     let renderCount = 0
     const person = store({ name: 'Bob' })
     const MyComp = view(() => {
@@ -35,16 +60,39 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    batch(() => {
-      batch(() => {
-        person.name = 'Rob'
-        person.name = 'David'
-      })
-      expect(container).toHaveTextContent('Bob')
+    act(() => {
       person.name = 'Ann'
+    })
+    act(() => {
       person.name = 'Rick'
     })
     expect(container).toHaveTextContent('Rick')
+    expect(renderCount).toBe(3)
+  })
+
+  test('should work with nested batch() calls', () => {
+    let renderCount = 0
+    const person = store({ name: 'Bob' })
+    const MyComp = view(() => {
+      renderCount++
+      return <div>{person.name}</div>
+    })
+
+    const { container } = render(<MyComp />)
+    expect(renderCount).toBe(1)
+    expect(container).toHaveTextContent('Bob')
+    act(() =>
+      batch(() => {
+        batch(() => {
+          person.name = 'Rob'
+          person.name = 'David'
+        })
+        expect(container).toHaveTextContent('Bob')
+        person.name = 'Ann'
+        person.name = 'Rick'
+      })
+    )
+    expect(container).toHaveTextContent('Rick')
     expect(renderCount).toBe(2)
   })
 
@@ -59,10 +107,10 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    const batched = () => {
+    const batched = act(() => {
       person.name = 'Ann'
       person.name = 'Rick'
-    }
+    })
     document.body.addEventListener('click', batched)
     document.body.dispatchEvent(new Event('click'))
     expect(container).toHaveTextContent('Rick')
@@ -83,12 +131,17 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    await new Promise(resolve =>
-      setTimeout(() => {
-        person.name = 'Ann'
-        person.name = 'Rick'
-        resolve()
-      }, 100)
+    await act(
+      () =>
+        new Promise(
+          resolve =>
+            setTimeout(() => {
+              person.name = 'Ann'
+              person.name = 'Rick'
+              resolve()
+            }),
+          100
+        )
     )
     expect(container).toHaveTextContent('Rick')
     expect(renderCount).toBe(2)
@@ -105,13 +158,16 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    await new Promise(resolve =>
-      // eslint-disable-next-line
-      requestAnimationFrame(() => {
-        person.name = 'Ann'
-        person.name = 'Rick'
-        resolve()
-      })
+    await act(
+      () =>
+        new Promise(resolve =>
+          // eslint-disable-next-line
+          requestAnimationFrame(() => {
+            person.name = 'Ann'
+            person.name = 'Rick'
+            resolve()
+          })
+        )
     )
     expect(container).toHaveTextContent('Rick')
     expect(renderCount).toBe(2)
@@ -128,17 +184,21 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    await Promise.resolve().then(() => {
-      person.name = 'Ann'
-      person.name = 'Rick'
-    })
+    await act(() =>
+      Promise.resolve().then(() => {
+        person.name = 'Ann'
+        person.name = 'Rick'
+      })
+    )
     expect(container).toHaveTextContent('Rick')
     expect(renderCount).toBe(2)
 
-    await Promise.reject(new Error()).catch(() => {
-      person.name = 'Ben'
-      person.name = 'Morty'
-    })
+    await act(() =>
+      Promise.reject(new Error()).catch(() => {
+        person.name = 'Ben'
+        person.name = 'Morty'
+      })
+    )
     expect(container).toHaveTextContent('Morty')
     expect(renderCount).toBe(3)
   })
@@ -154,11 +214,11 @@ describe('batching', () => {
     const { container } = render(<MyComp />)
     expect(renderCount).toBe(1)
     expect(container).toHaveTextContent('Bob')
-    await Promise.resolve()
+    await act(() => Promise.resolve())
     person.name = 'Ann'
     person.name = 'Rick'
     // ISSUE -> here it is not yet updated!!! -> the then block is not over I guess
-    await Promise.resolve()
+    await act(() => Promise.resolve())
     expect(container).toHaveTextContent('Rick')
     expect(renderCount).toBe(2)
   })

__tests__/edgeCases.test.js

@@ -1,5 +1,5 @@
 import React, { Component, useState } from 'react'
-import { render, cleanup, fireEvent } from '@testing-library/react/pure'
+import { render, cleanup, fireEvent, act } from '@testing-library/react/pure'
 import { view, store, batch } from 'react-easy-state'
 
 describe('edge cases', () => {
@@ -50,7 +50,8 @@ describe('edge cases', () => {
     const MyComp = view(
       class extends Component {
         state = { counter: 0 };
-        handleIncrement = () => this.setState({ counter: this.state.counter + 1 });
+        handleIncrement = () =>
+          this.setState({ counter: this.state.counter + 1 });
 
         render () {
           return <div onClick={this.handleIncrement}>{this.state.counter}</div>
@@ -68,7 +69,8 @@ describe('edge cases', () => {
     const MyComp = view(
       class extends Component {
         state = { counter: 0 };
-        handleIncrement = () => this.setState({ counter: this.state.counter + 1 });
+        handleIncrement = () =>
+          this.setState({ counter: this.state.counter + 1 });
 
         render () {
           return (
@@ -182,7 +184,7 @@ describe('edge cases', () => {
       expect(container).toHaveTextContent('12, 1')
       expect(parentCalls).toBe(1)
       expect(childCalls).toBe(1)
-      batch(change)
+      act(() => batch(change))
       expect(container).toHaveTextContent('')
       expect(parentCalls).toBe(2)
       expect(childCalls).toBe(1)
@@ -225,7 +227,7 @@ describe('edge cases', () => {
       expect(container).toHaveTextContent('12, 1')
       expect(parentCalls).toBe(1)
       expect(childCalls).toBe(1)
-      batch(change)
+      act(() => batch(change))
       expect(container).toHaveTextContent('')
       expect(parentCalls).toBe(2)
       expect(childCalls).toBe(1)

__tests__/router.test.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
-import { act } from 'react-dom/test-utils'
-import { render, cleanup, fireEvent } from '@testing-library/react/pure'
+import { render, cleanup, fireEvent, act } from '@testing-library/react/pure'
 import { view, store } from 'react-easy-state'
 import {
   BrowserRouter as Router,

__tests__/styled.test.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
-import { act } from 'react-dom/test-utils'
-import { render, cleanup } from '@testing-library/react/pure'
+import { render, cleanup, act } from '@testing-library/react/pure'
 import { view, store } from 'react-easy-state'
 import { withTheme, ThemeProvider } from 'styled-components'
 

examples/beer-finder/src/App.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import NavBar from './NavBar'
-import BeerList from './BeerList'
+import React from "react";
+import NavBar from "./NavBar";
+import BeerList from "./BeerList";
 
 // if a component does not use any store, it doesn't have to be wrapped with view()
 // it is safer to wrap everything with view() until you get more comfortable with Easy State
@@ -9,4 +9,4 @@ export default () => (
     <NavBar />
     <BeerList />
   </>
-)
+);

examples/beer-finder/src/Beer.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { view, store } from 'react-easy-state'
-import Card from '@material-ui/core/Card'
-import CardMedia from '@material-ui/core/CardMedia'
-import CardContent from '@material-ui/core/CardContent'
+import React from "react";
+import { view, store } from "react-easy-state";
+import Card from "@material-ui/core/Card";
+import CardMedia from "@material-ui/core/CardMedia";
+import CardContent from "@material-ui/core/CardContent";
 
 // this is re-rendered whenever the relevant parts of the used data stores change
 export default view(
   ({ name, description, image_url: imageUrl, food_pairing: foodPairing }) => {
-    const beer = store({ details: false })
+    const beer = store({ details: false });
 
     return (
-      <Card onClick={() => (beer.details = !beer.details)} className='beer'>
-        {!beer.details && <CardMedia image={imageUrl} className='media' />}
+      <Card onClick={() => (beer.details = !beer.details)} className="beer">
+        {!beer.details && <CardMedia image={imageUrl} className="media" />}
         <CardContent>
           <h3>{name}</h3>
           {beer.details ? (
@@ -25,6 +25,6 @@ export default view(
           )}
         </CardContent>
       </Card>
-    )
+    );
   }
-)
+);

examples/beer-finder/src/BeerList.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import { view } from 'react-easy-state'
-import appStore from './appStore'
-import Beer from './Beer'
+import React from "react";
+import { view } from "react-easy-state";
+import appStore from "./appStore";
+import Beer from "./Beer";
 
 // this is re-rendered whenever the relevant parts of the used data stores change
 export default view(() => (
-  <div className='beerlist'>
+  <div className="beerlist">
     {!appStore.beers.length ? (
       <h3>No matching beers found!</h3>
     ) : (
       appStore.beers.map(beer => <Beer key={beer.name} {...beer} />)
     )}
   </div>
-))
+));

examples/beer-finder/src/NavBar.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { view } from 'react-easy-state'
-import SearchBar from 'material-ui-search-bar'
-import LinearProgress from '@material-ui/core/LinearProgress'
-import appStore from './appStore'
+import React from "react";
+import { view } from "react-easy-state";
+import SearchBar from "material-ui-search-bar";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import appStore from "./appStore";
 
 // this is re-rendered whenever the relevant parts of the used data stores change
 export default view(() => (
-  <div className='searchbar'>
+  <div className="searchbar">
     <SearchBar
       onRequestSearch={appStore.fetchBeers}
-      placeholder='Add some food ...'
+      placeholder="Add some food ..."
       autoFocus
     />
     {appStore.isLoading && <LinearProgress />}
   </div>
-))
+));