fix tests and rollup

Author: silviuaavram

rollup.config.js

@@ -3,6 +3,9 @@ const {babel} = require('@rollup/plugin-babel')
 const typescript = require('@rollup/plugin-typescript')
 const config = require('kcd-scripts/dist/config/rollup.config')
 
+const isPreact = process.env.BUILD_PREACT === 'true'
+const tsconfig = isPreact ? 'tsconfig.preact.json' : 'tsconfig.json'
+
 const babelPluginIndex = config.plugins.findIndex(
   plugin => plugin.name === 'babel',
 )
@@ -21,10 +24,10 @@ config.plugins[cjsPluginIndex] = commonjs({
 })
 
 if (typescriptPluginIndex === -1) {
-  config.plugins.push(typescript({tsconfig: 'tsconfig.json'}))
+  config.plugins.push(typescript({tsconfig}))
 } else {
   config.plugins[typescriptPluginIndex] = typescript({
-    tsconfig: 'tsconfig.json',
+    tsconfig,
   })
 }
 

src/__tests__/__snapshots__/downshift.get-menu-props.js.snap

@@ -1,5 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`not applying the ref prop results in an error 1`] = `downshift: The ref prop "ref" from getMenuProps was not applied correctly on your menu element.`;
-
-exports[`using a composite component and calling getMenuProps without a refKey results in an error 1`] = `downshift: The ref prop "ref" from getMenuProps was not applied correctly on your menu element.`;

src/__tests__/downshift.get-button-props.js

@@ -74,11 +74,7 @@ test('getToggleButtonProps returns all given props', () => {
   const Button = jest.fn(props => <button {...props} />)
   setup({buttonProps, Button})
   expect(Button).toHaveBeenCalledTimes(1)
-  const context = expect.any(Object)
-  expect(Button).toHaveBeenCalledWith(
-    expect.objectContaining(buttonProps),
-    context,
-  )
+  expect(Button).toHaveBeenCalledWith(expect.objectContaining(buttonProps), undefined)
 })
 
 // normally this test would be like the others where we render and then simulate a click on the

src/__tests__/downshift.get-menu-props.js

@@ -8,7 +8,7 @@ afterEach(() => console.error.mockRestore())
 const Menu = ({innerRef, ...rest}) => <div ref={innerRef} {...rest} />
 const RefMenu = React.forwardRef((props, ref) => <div ref={ref} {...props} />)
 
-test('using a composite component and calling getMenuProps without a refKey results in an error', () => {
+test('using a composite component and calling getMenuProps without a refKey does not result in error anymore', () => {
   const MyComponent = () => (
     <Downshift
       children={({getMenuProps}) => (
@@ -19,7 +19,7 @@ test('using a composite component and calling getMenuProps without a refKey resu
     />
   )
   render(<MyComponent />)
-  expect(console.error.mock.calls[1][0]).toMatchSnapshot()
+  expect(console.error).not.toHaveBeenCalled()
 })
 
 test('not applying the ref prop results in an error', () => {

src/__tests__/downshift.misc.js

@@ -2,7 +2,7 @@
 // but we still want to have tested.
 
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import {act, render} from '@testing-library/react'
 import Downshift from '../'
 
@@ -68,21 +68,38 @@ test('toggleMenu can take no arguments at all', () => {
   )
 })
 
-test('clearItems clears the all items', () => {
+test('clearItems clears all items', () => {
   const item = 'Chess'
+
   const children = ({getItemProps}) => (
     <div>
       <div key={item} {...getItemProps({item})}>
         {item}
       </div>
     </div>
   )
-  // IMPLEMENTATION DETAIL TEST :-(
-  // eslint-disable-next-line react/no-render-return-value
-  const downshiftInstance = ReactDOM.render(
-    <Downshift>{children}</Downshift>,
-    document.createElement('div'),
-  )
+
+  // Wrap Downshift to expose its instance methods through a ref
+  const DownshiftWrapper = React.forwardRef((_props, ref) => {
+    const innerRef = React.useRef(null)
+
+    React.useImperativeHandle(ref, () => innerRef.current)
+
+    return <Downshift ref={innerRef}>{children}</Downshift>
+  })
+
+  const container = document.createElement('div')
+  const root = ReactDOM.createRoot(container)
+
+  const dsRef = React.createRef()
+
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  act(() => {
+    root.render(<DownshiftWrapper ref={dsRef} />)
+  })
+
+  const downshiftInstance = dsRef.current
+
   expect(downshiftInstance.items).toEqual([item])
   downshiftInstance.clearItems()
   expect(downshiftInstance.items).toEqual([])

tsconfig.json

@@ -12,6 +12,7 @@
     "module": "ESNext",
     "typeRoots": ["./typings", "./node_modules/@types"],
     "strictNullChecks": true,
+    "outDir": "dist"
   },
   "include": [
     "typings/**/*.d.ts",

tsconfig.preact.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "preact/dist"
+  }
+}