diff --git a/packages/react-virtual/__tests__/index.test.js b/packages/react-virtual/__tests__/index.test.js
deleted file mode 100644
index 717747ed..00000000
--- a/packages/react-virtual/__tests__/index.test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import * as React from 'react'
-
-import { useVirtual as useVirtualImpl } from '../src/index'
-
-function List({
-  size = 200,
-  overscan,
-  height = 200,
-  width = 200,
-  onRef,
-  parentRef,
-  useVirtual,
-  rangeExtractor,
-}) {
-  const rowVirtualizer = useVirtual({
-    size,
-    parentRef,
-    overscan,
-    useObserver: React.useCallback(() => ({ height, width }), [height, width]),
-    rangeExtractor,
-  })
-
-  return (
-    <>
-      <div
-        ref={parentRef}
-        style={{
-          height,
-          width,
-          overflow: 'auto',
-        }}
-      >
-        <div
-          style={{
-            height: `${rowVirtualizer.totalSize}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          {rowVirtualizer.virtualItems.map((virtualRow) => (
-            <div
-              key={virtualRow.index}
-              ref={onRef ? onRef(virtualRow) : undefined}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                transform: `translateY(${virtualRow.start}px)`,
-                height: `${virtualRow.size}px`,
-              }}
-            >
-              Row {virtualRow.index}
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  )
-}
-
-let useVirtual, parentRef, props
-
-beforeEach(() => {
-  parentRef = React.createRef()
-  useVirtual = jest.fn((props) => useVirtualImpl(props))
-
-  props = { parentRef, useVirtual }
-})
-
-test('should render', () => {
-  render(<List {...props} />)
-
-  expect(screen.queryByText('Row 0')).toBeInTheDocument()
-  expect(screen.queryByText('Row 4')).toBeInTheDocument()
-  expect(screen.queryByText('Row 5')).not.toBeInTheDocument()
-
-  expect(useVirtual).toHaveBeenCalledTimes(1)
-})
-
-test('should render with overscan', () => {
-  render(<List {...props} overscan={0} />)
-
-  expect(screen.queryByText('Row 0')).toBeInTheDocument()
-  expect(screen.queryByText('Row 3')).toBeInTheDocument()
-  expect(screen.queryByText('Row 4')).not.toBeInTheDocument()
-
-  expect(useVirtual).toHaveBeenCalledTimes(1)
-})
-
-test('should render given dynamic size', async () => {
-  const onRef = (virtualRow) => (el) => {
-    if (el) {
-      jest.spyOn(el, 'offsetHeight', 'get').mockImplementation(() => 25)
-    }
-    virtualRow.measureRef(el)
-  }
-
-  render(<List {...props} onRef={onRef} />)
-
-  expect(screen.queryByText('Row 0')).toBeInTheDocument()
-  await waitFor(() => expect(screen.queryByText('Row 8')).toBeInTheDocument())
-  expect(screen.queryByText('Row 9')).not.toBeInTheDocument()
-
-  expect(useVirtual).toHaveBeenCalledTimes(4)
-})
-
-test('should render given dynamic size after scroll', async () => {
-  const onRef = (virtualRow) => (el) => {
-    if (el) {
-      jest.spyOn(el, 'offsetHeight', 'get').mockImplementation(() => 25)
-    }
-    virtualRow.measureRef(el)
-  }
-
-  render(<List {...props} onRef={onRef} />)
-
-  expect(screen.queryByText('Row 0')).toBeInTheDocument()
-  await waitFor(() => expect(screen.queryByText('Row 8')).toBeInTheDocument())
-  expect(screen.queryByText('Row 9')).not.toBeInTheDocument()
-
-  fireEvent.scroll(parentRef.current, { target: { scrollTop: 75 } })
-
-  expect(screen.queryByText('Row 1')).not.toBeInTheDocument()
-  expect(screen.queryByText('Row 2')).toBeInTheDocument()
-  await waitFor(() => expect(screen.queryByText('Row 11')).toBeInTheDocument())
-  expect(screen.queryByText('Row 12')).not.toBeInTheDocument()
-})
-
-test('should use rangeExtractor', () => {
-  render(<List {...props} rangeExtractor={() => [0, 1]} />)
-
-  expect(screen.queryByText('Row 0')).toBeInTheDocument()
-  expect(screen.queryByText('Row 1')).toBeInTheDocument()
-  expect(screen.queryByText('Row 2')).not.toBeInTheDocument()
-})
diff --git a/packages/react-virtual/__tests__/index.test.tsx b/packages/react-virtual/__tests__/index.test.tsx
new file mode 100644
index 00000000..52897ddb
--- /dev/null
+++ b/packages/react-virtual/__tests__/index.test.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+import { useVirtual, Range } from '../src/index'
+
+let renderer: jest.Mock<undefined, []>
+let useDynamic = false
+
+interface ListProps {
+  size?: number
+  overscan?: number
+  height?: number
+  width?: number
+  rangeExtractor?: (range: Range) => number[]
+}
+
+function List({
+  size = 200,
+  overscan,
+  height = 200,
+  width = 200,
+  rangeExtractor,
+}: ListProps) {
+  renderer()
+
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const rowVirtualizer = useVirtual({
+    size,
+    parentRef,
+    overscan,
+    useObserver: React.useCallback(() => ({ height, width }), [height, width]),
+    rangeExtractor,
+  })
+
+  return (
+    <div
+      ref={parentRef}
+      style={{ height, width, overflow: 'auto' }}
+      data-testid="scroller"
+    >
+      <div
+        style={{
+          height: rowVirtualizer.totalSize,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {rowVirtualizer.virtualItems.map((virtualRow) => (
+          <div
+            data-testid={`item-${virtualRow.key}`}
+            key={virtualRow.key}
+            ref={useDynamic ? virtualRow.measureRef : undefined}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              transform: `translateY(${virtualRow.start}px)`,
+              height: virtualRow.size,
+            }}
+          >
+            Row {virtualRow.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+beforeEach(() => {
+  useDynamic = false
+  renderer = jest.fn(() => undefined)
+})
+
+test('should render', () => {
+  render(<List />)
+
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+  expect(screen.queryByText('Row 4')).toBeInTheDocument()
+  expect(screen.queryByText('Row 5')).not.toBeInTheDocument()
+
+  expect(renderer).toHaveBeenCalledTimes(1)
+})
+
+test('should render with overscan', () => {
+  render(<List overscan={0} />)
+
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+  expect(screen.queryByText('Row 3')).toBeInTheDocument()
+  expect(screen.queryByText('Row 4')).not.toBeInTheDocument()
+
+  expect(renderer).toHaveBeenCalledTimes(1)
+})
+
+test('should render given dynamic size', () => {
+  useDynamic = true
+  // can we mock elements based on data-testid?
+  const mock = jest
+    .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+    .mockImplementation(() => 25)
+
+  render(<List />)
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+  expect(screen.queryByText('Row 8')).toBeInTheDocument()
+  expect(screen.queryByText('Row 9')).not.toBeInTheDocument()
+
+  expect(renderer).toHaveBeenCalledTimes(4)
+  mock.mockRestore()
+})
+
+test('should render given dynamic size after scroll', () => {
+  useDynamic = true
+  // can we mock elements based on data-testid?
+  const mock = jest
+    .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+    .mockImplementation(() => 25)
+
+  render(<List />)
+
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+  expect(screen.queryByText('Row 8')).toBeInTheDocument()
+  expect(screen.queryByText('Row 9')).not.toBeInTheDocument()
+
+  expect(renderer).toHaveBeenCalledTimes(4)
+  renderer.mockReset()
+
+  fireEvent.scroll(screen.getByTestId('scroller'), {
+    target: { scrollTop: 75 },
+  })
+
+  expect(screen.queryByText('Row 1')).not.toBeInTheDocument()
+  expect(screen.queryByText('Row 2')).toBeInTheDocument()
+  expect(screen.queryByText('Row 11')).toBeInTheDocument()
+  expect(screen.queryByText('Row 12')).not.toBeInTheDocument()
+
+  expect(renderer).toHaveBeenCalledTimes(3)
+  mock.mockRestore()
+})
+
+test('should use rangeExtractor', () => {
+  render(<List rangeExtractor={() => [0, 1]} />)
+
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+  expect(screen.queryByText('Row 1')).toBeInTheDocument()
+  expect(screen.queryByText('Row 2')).not.toBeInTheDocument()
+})
diff --git a/packages/react-virtual/tsconfig.json b/packages/react-virtual/tsconfig.json
index 5352e7ce..1aa0106d 100644
--- a/packages/react-virtual/tsconfig.json
+++ b/packages/react-virtual/tsconfig.json
@@ -5,7 +5,5 @@
     "outDir": "./build/types"
   },
   "files": ["src/index.tsx"],
-  "include": [
-    "src"
-  ]
-}
\ No newline at end of file
+  "include": ["src", "__tests__"]
+}