Skip to content

Commit

Permalink
fix false positive log when running tests
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
RobinMalfait committed Feb 21, 2023
1 parent 569cec7 commit d1ca3a9
Showing 1 changed file with 21 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit d1ca3a9

Please sign in to comment.