fix false positive log when running tests

Let's wrap the test in `act` to get rid of the warning. In practice
(while testing in the browser) the actual warning doesn't seem to affect
the user experience at all.

The `act` function is typed in a strange way (`Promise<undefined> &
void`). Yet the actual contents of the `act` callback is returned as
expected. Therefore we overrode the type of `act` to make sure this
reflects reality better. (Thanks @thecrypticace!)

Also added an additional check to make sure the actual `container` is
available to extra ensure we are not lying by overriding the type.
This commit is contained in:
Robin Malfait
2023-02-21 12:51:01 +01:00
parent 569cec7514
commit d1ca3a9797
@@ -1,11 +1,13 @@
import React, { Fragment, useState, useRef, useLayoutEffect, useEffect } from 'react'
import { render, fireEvent } from '@testing-library/react'
import { render, fireEvent, act as _act } from '@testing-library/react'
import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
import { Transition } from './transition'
import { executeTimeline } from '../../test-utils/execute-timeline'
let act = _act as unknown as <T>(fn: () => T) => PromiseLike<T>
function nextFrame() {
return new Promise<void>((resolve) => {
requestAnimationFrame(() => {
@@ -423,22 +425,26 @@ describe('Setup API', () => {
`)
})
it('should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true', () => {
let { container } = render(
<Transition
show={true}
appear={true}
enter="enter"
enterFrom="enter-from"
enterTo="enter-to"
leave="leave"
leaveFrom="leave-from"
leaveTo="leave-to"
>
Children
</Transition>
it('should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true', async () => {
let { container } = await act(() =>
render(
<Transition
show={true}
appear={true}
enter="enter"
enterFrom="enter-from"
enterTo="enter-to"
leave="leave"
leaveFrom="leave-from"
leaveTo="leave-to"
>
Children
</Transition>
)
)
expect(container).toBeDefined()
expect(container.firstChild).toMatchInlineSnapshot(`
<div
class="enter enter-from"