test: improve testing with Preact & React 18, etc

.github/workflows/preact-test.yml

@@ -5,7 +5,7 @@
 # - .github/workflows/test-react-16.yml
 # - https://github.com/actions/starter-workflows/blob/b2e786d4e9af21f57ab07c1bc7231ed867f7675f/ci/node.js.yml
 
-name: Preact - limited testing see issue 41
+name: Preact - skip some tests see issue 41
 
 on:
   - push

.github/workflows/react-18-test.yml

@@ -5,7 +5,7 @@
 # - .github/workflows/test-react-16.yml
 # - https://github.com/actions/starter-workflows/blob/b2e786d4e9af21f57ab07c1bc7231ed867f7675f/ci/node.js.yml
 
-name: React 18 - limited testing see issue 40
+name: React 18 - skip test see issue 40
 
 on:
   - push

.github/workflows/test-react-16.yml

@@ -33,4 +33,4 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: yarn
     - run: yarn add --dev react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} enzyme-adapter-react-16@latest
-    - run: npm test
+    - run: npx cross-env TEST_WITH_REACT_16=1 jest

src/packages/recompose/__tests__/componentFromStream-test.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { Observable, Subject } from 'rxjs'
 import sinon from 'sinon'
+import { act } from './utils'
 import rxjsConfig from '../rxjsObservableConfig'
 import { componentFromStreamWithConfig } from '../componentFromStream'
 
@@ -41,19 +42,13 @@ test('componentFromStream unsubscribes from stream before unmounting', () => {
 })
 
 test('componentFromStream renders nothing until the stream emits a value', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  if (process.env.TEST_WITH_REACT_18) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 - see react-recompose#40')
-    return
-  }
-
   const vdom$ = new Subject()
   const Div = componentFromStream(() => vdom$.mapTo(<div />))
   const wrapper = mount(<Div />)
   expect(wrapper.find('div').length).toBe(0)
-  vdom$.next()
+  act(() => {
+    vdom$.next()
+  })
   wrapper.update()
   expect(wrapper.find('div').length).toBe(1)
 })
@@ -102,15 +97,7 @@ test('complete props stream before unmounting', () => {
   expect(counter).toBe(0)
 })
 
-test('completed props stream should throw an exception', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR PREACT - see react-recompose#41')
-    return
-  }
-
+test('completed props stream should throw an exception (etc.)', () => {
   const Div = componentFromStream(props$ => {
     const first$ = props$.filter(() => false).first().startWith(null)
 
@@ -124,5 +111,12 @@ test('completed props stream should throw an exception', () => {
   const error = sinon.stub(console, 'error')
 
   expect(() => wrapper.unmount()).toThrowError(/no elements in sequence/)
-  expect(error.called).toBe(true)
+
+  if (process.env.TEST_WITH_PREACT) {
+    // TBD investigate why there is no console error with Preact in this test
+    /* eslint-disable-next-line no-console */
+    console.warn('SKIP console error check for Preact in this test')
+  } else {
+    expect(error.called).toBe(true)
+  }
 })

src/packages/recompose/__tests__/createSink-test.js

@@ -1,18 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith } from './utils'
 import { createSink, compose, withState, mapProps } from '../'
 
 test('createSink creates a React component that fires a callback when receiving new props', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const spy = sinon.spy()
   const Sink = createSink(spy)
   const Counter = compose(
@@ -29,7 +21,7 @@ test('createSink creates a React component that fires a callback when receiving
     </div>
   )
 
-  const { increment } = spy.lastCall.args[0]
+  const increment = actWith(spy.lastCall.args[0].increment)
   const getCounter = () => spy.lastCall.args[0].counter
   expect(getCounter()).toBe(0)
   increment()

src/packages/recompose/__tests__/mapProps-test.js

@@ -1,18 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith } from './utils'
 import { mapProps, withState, compose } from '../'
 
 test('mapProps maps owner props to child props', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const component = sinon.spy(() => null)
   component.displayName = 'component'
 
@@ -27,7 +19,7 @@ test('mapProps maps owner props to child props', () => {
   expect(StringConcat.displayName).toBe('withState(mapProps(component))')
 
   mount(<StringConcat />)
-  const { updateStrings } = component.firstCall.args[0]
+  const updateStrings = actWith(component.firstCall.args[0].updateStrings)
   updateStrings(strings => [...strings, 'fa'])
 
   expect(component.firstCall.args[0].string).toBe('doremi')

src/packages/recompose/__tests__/nest-test.js

@@ -6,8 +6,10 @@ test('nest nests components from outer to inner', () => {
   // TODO ref:
   // - https://github.com/react-recompose/react-recompose/issues/41
   if (process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR PREACT - see react-recompose#41')
+    /* eslint-disable-next-line no-console */
+    console.warn(
+      'SKIP FOR PREACT - see https://github.com/react-recompose/react-recompose/issues/41'
+    )
     return
   }
 

src/packages/recompose/__tests__/onlyUpdateForKeys-test.js

@@ -1,18 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith } from './utils'
 import { onlyUpdateForKeys, compose, withState } from '../'
 
 test('onlyUpdateForKeys implements shouldComponentUpdate()', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const component = sinon.spy(() => null)
   component.displayName = 'component'
 
@@ -27,12 +19,13 @@ test('onlyUpdateForKeys implements shouldComponentUpdate()', () => {
   )
 
   mount(<Counter />)
-  const { updateCounter, updateFoobar } = component.firstCall.args[0]
+  const updateCounter = actWith(component.firstCall.args[0].updateCounter)
+  const updateFoobar = actWith(component.firstCall.args[0].updateFoobar)
 
   expect(component.lastCall.args[0].counter).toBe(0)
   expect(component.lastCall.args[0].foobar).toBe('foobar')
 
-  // Does not update
+  // should not update
   updateFoobar('barbaz')
   expect(component.calledOnce).toBe(true)
 

src/packages/recompose/__tests__/onlyUpdateForPropTypes-test.js

@@ -2,18 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import sinon from 'sinon'
 import { mount, shallow } from 'enzyme'
+import { actWith } from './utils'
 import { onlyUpdateForPropTypes, compose, withState, setPropTypes } from '../'
 
 test('onlyUpdateForPropTypes only updates for props specified in propTypes', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const component = sinon.spy(() => null)
   component.displayName = 'component'
 
@@ -29,12 +21,13 @@ test('onlyUpdateForPropTypes only updates for props specified in propTypes', ()
   )
 
   mount(<Counter />)
-  const { updateCounter, updateFoobar } = component.firstCall.args[0]
+  const updateCounter = actWith(component.firstCall.args[0].updateCounter)
+  const updateFoobar = actWith(component.firstCall.args[0].updateFoobar)
 
   expect(component.lastCall.args[0].counter).toBe(0)
   expect(component.lastCall.args[0].foobar).toBe('foobar')
 
-  // Does not update
+  // should not update
   updateFoobar('barbaz')
   expect(component.calledOnce).toBe(true)
 

src/packages/recompose/__tests__/pure-test.js

@@ -1,19 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith, countRenders } from './utils'
 import { pure, compose, withState } from '../'
-import { countRenders } from './utils'
 
 test('pure implements shouldComponentUpdate() using shallowEqual()', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const component = sinon.spy(() => null)
   component.displayName = 'component'
 
@@ -27,12 +18,12 @@ test('pure implements shouldComponentUpdate() using shallowEqual()', () => {
   expect(Todos.displayName).toBe('withState(pure(countRenders(component)))')
 
   mount(<Todos />)
-  const { updateTodos } = component.firstCall.args[0]
+  const updateTodos = actWith(component.firstCall.args[0].updateTodos)
 
   expect(component.lastCall.args[0].todos).toBe(initialTodos)
   expect(component.lastCall.args[0].renderCount).toBe(1)
 
-  // Does not re-render
+  // should not re-render
   updateTodos(initialTodos)
   expect(component.calledOnce).toBe(true)
 

src/packages/recompose/__tests__/renderComponent-test.js

@@ -1,18 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith } from './utils'
 import { renderComponent, withState, compose, branch } from '../'
 
 test('renderComponent always renders the given component', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const componentA = sinon.spy(() => null)
   const componentB = sinon.spy(() => null)
 
@@ -26,7 +18,7 @@ test('renderComponent always renders the given component', () => {
   )(null)
 
   mount(<Foobar />)
-  const { updateFlip } = componentB.firstCall.args[0]
+  const updateFlip = actWith(componentB.firstCall.args[0].updateFlip)
 
   expect(componentB.calledOnce).toBe(true)
   expect(componentA.notCalled).toBe(true)

src/packages/recompose/__tests__/renderNothing-test.js

@@ -6,8 +6,10 @@ test('renderNothing returns a component that renders null', () => {
   // TODO ref:
   // - https://github.com/react-recompose/react-recompose/issues/41
   if (process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR PREACT - see react-recompose#41')
+    /* eslint-disable-next-line no-console */
+    console.warn(
+      'SKIP FOR PREACT - see https://github.com/react-recompose/react-recompose/issues/41'
+    )
     return
   }
 

src/packages/recompose/__tests__/shouldUpdate-test.js

@@ -1,19 +1,10 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { actWith, countRenders } from './utils'
 import { shouldUpdate, compose, withState } from '../'
-import { countRenders } from './utils'
 
 test('shouldUpdate implements shouldComponentUpdate', () => {
-  // TODO ref:
-  // - https://github.com/react-recompose/react-recompose/issues/40
-  // - https://github.com/react-recompose/react-recompose/issues/41
-  if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
-    return
-  }
-
   const component = sinon.spy(() => null)
   component.displayName = 'component'
 
@@ -29,12 +20,12 @@ test('shouldUpdate implements shouldComponentUpdate', () => {
   )
 
   mount(<Todos />)
-  const { updateTodos } = component.firstCall.args[0]
+  const updateTodos = actWith(component.firstCall.args[0].updateTodos)
 
   expect(component.lastCall.args[0].todos).toBe(initialTodos)
   expect(component.lastCall.args[0].renderCount).toBe(1)
 
-  // Does not re-render
+  // should not re-render
   updateTodos(initialTodos)
   expect(component.calledOnce).toBe(true)
 

src/packages/recompose/__tests__/utils.js

@@ -2,6 +2,21 @@ import React from 'react'
 import setDisplayName from '../setDisplayName'
 import wrapDisplayName from '../wrapDisplayName'
 
+/* using require here to support Preact vs React */
+/* eslint-disable */
+export const { act } = process.env.TEST_WITH_PREACT
+  ? require('preact/test-utils')
+  : process.env.TEST_WITH_REACT_16
+    ? { act: f => f() }
+    : require('react-dom/test-utils')
+/* eslint-enable */
+
+export const actWith = f => arg => {
+  act(() => {
+    f(arg)
+  })
+}
+
 export const countRenders = BaseComponent => {
   class CountRenders extends React.Component {
     renderCount = 0

src/packages/recompose/__tests__/withHandlers-test.js

@@ -7,8 +7,10 @@ test('withHandlers passes handlers to base component', () => {
   // TODO ref:
   // - https://github.com/react-recompose/react-recompose/issues/41
   if (process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR PREACT - see react-recompose#41')
+    /* eslint-disable-next-line no-console */
+    console.warn(
+      'SKIP FOR PREACT - see https://github.com/react-recompose/react-recompose/issues/41'
+    )
     return
   }
 
@@ -73,8 +75,10 @@ test('withHandlers warns if handler is not a higher-order function', () => {
   // - https://github.com/react-recompose/react-recompose/issues/40
   // - https://github.com/react-recompose/react-recompose/issues/41
   if (process.env.TEST_WITH_REACT_18 || process.env.TEST_WITH_PREACT) {
-    /* eslint-disable-line no-console */
-    console.log('SKIP FOR REACT 18 & PREACT - see react-recompose#40 & #42')
+    /* eslint-disable-next-line no-console */
+    console.warn(
+      'SKIP FOR REACT 18 & PREACT - see https://github.com/react-recompose/react-recompose/issues/40 & https://github.com/react-recompose/react-recompose/issues/41'
+    )
     return
   }