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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user