Tests with setTimeout fail after update to v7.29.6

[ma7moudat]

• @testing-library/dom version: 7.29.6
• Testing Framework and version: jest 26.6.3
• DOM Environment:

Relevant code or config:

describe(() => {
    it('should show loading state while search is running', async () => {
        MockInstance(Service, () => ({
            search: (request) => NEVER,
        }))
        const fixture = MockRender(SearchComponent)
        const el = fixture.point.nativeElement
        fixture.point.componentInstance.filters$.next(requestFilterMock)
        await sleep(100) // <-- uses setTimeout
        fixture.detectChanges()

        // initial search hint not shown
        expect(queryByText(el, matchers.initialSearch)).toBeFalsy()

        // loading text
        expect(getByText(el, matchers.loading))

        // show 15 skeleton clusters while loading
        expect(ngMocks.findAll(WagonHireClusterComponent)).toHaveLength(15)
        expect(getAllByLabelText(el, /loading/).length).toBeGreaterThan(0)
    })
})

What you did:

Nothing, test was running fine before updating from 7.29.4 to 7.29.6. Now it fails with the error message below.

What happened:

: Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.
Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error:
    at new Spec (xyz\node_modules\jest-jasmine2\build\jasmine\Spec.js:116:22)
    at new Spec (xyz\node_modules\jest-jasmine2\build\setup_jest_globals.js:78:9)
    at new JBPatchedSpec (C:\Program Files\JetBrains\WebStorm\plugins\JavaScriptLanguage\helpers\jest-intellij\lib\jest-intellij-jasmine-reporter.js:94:7)
    at specFactory (xyz\node_modules\jest-jasmine2\build\jasmine\Env.js:523:24)
    at Env.it (xyz\node_modules\jest-jasmine2\build\jasmine\Env.js:592:24)
    at Env.it (xyz\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:134:23)
    at it (xyz\node_modules\jest-jasmine2\build\jasmine\jasmineLight.js:100:21)
    at context.<computed> (xyz\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:4288:39)
    at Suite.<anonymous> (xyz\src\app\wagon-hire\wagon-hire-search\wagon-hire-search.component.spec.ts:87:5)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (xyz\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:407:30)
    at Zone.Object.<anonymous>.Zone.run (xyz\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:167:47)
    at Suite.<anonymous> (xyz\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:4227:33)
    at addSpecsToSuite (xyz\node_modules\jest-jasmine2\build\jasmine\Env.js:444:51)
    at Env.describe (xyz\node_modules\jest-jasmine2\build\jasmine\Env.js:414:11)
    at describe (xyz\node_modules\jest-jasmine2\build\jasmine\jasmineLight.js:88:18)
    at context.<computed> (xyz\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:4270:39)
    at Object.<anonymous> (xyz\src\app\wagon-hire\wagon-hire-search\wagon-hire-search.component.spec.ts:26:1)
    at Runtime._execModule (xyz\node_modules\jest-runtime\build\index.js:1299:24)
    at Runtime._loadModule (xyz\node_modules\jest-runtime\build\index.js:898:12)
    at Runtime.requireModule (xyz\node_modules\jest-runtime\build\index.js:746:10)
    at jasmine2 (xyz\node_modules\jest-jasmine2\build\index.js:230:13)
    at runTestInternal (xyz\node_modules\jest-runner\build\runTest.js:380:22)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at runTest (xyz\node_modules\jest-runner\build\runTest.js:472:34)

Problem description:

Now one of the following changes the outcome:

• Calling jest.useRealTimers() fixes the test, but it doesn't make sense to call it in every test or test suite that uses testing-library.
• Removing the call await sleep(100) which uses setTimeout moves the test further, but the asserts fail since the needed nodes aren't available yet. Using waitFor didn't help.

[no-creative-name]

Encountered the same issue. It only happens when running Jest in GitHub Action CD though. Locally it works fine for me.

[eps1lon]

Thanks for the report.

A repro would help a lot here. Otherwise fixing the problem might be impossible unless we actually revert recent changes.

[ma7moudat]

@eps1lon I'll try to provide one by tomorrow

[ma7moudat]

@eps1lon I was unable to create a reproduction. It might be that somewhere in our tests fake timers are used without reverting back to real timers. I'll keep digging!
@no-creative-name do you think you can create a reproduction? If not, then the issue should probably be closed!

[no-creative-name]

@ma7moudat Thanks for coming back to let us know ;) I'll see what I can do. Busy week.

[no-creative-name]

Honestly, I don't think I'm able to as of now. The problem only seems to arise on a pretty specific setup and only in a GitHub Actions pipeline for my part.

[timdeschryver]

It seems like some tests of ATL are also failing with the latest version of DTL.
At first sight, only the tests that use waitFor or waitForElementToBeRemoved.

I'll take a look at it in a couple of days.

@ma7moudat I just noticed that you're using the Angular Testing Library.
The latest version of ATL has DTL v7.29.4 pinned as a dependency as a quick fx.

[msteitle]

I am experiencing an issue that smells suspiciously similar to this.

After updating RTL to 11.2.5 and adding an execution of configure({ testIdAttribute: 'data-test-automation-id' }) in test setup, hundreds of tests (not utilizing RTL) started failing.

If I remove the configure statement, everything passes again.

Now, if I add jest.useRealTimers() in conjunction with configure in my jest setup, these failures don't happen. However, my tests using RTL fail, citing "TypeError: MutationObserver is not a constructor". Many of the failures resolved by adding jest.useRealTimers() make no use of setTimeout explicitly.

If I move the configure call into each test individually, everything works fine.

Aside from this information, I currently have no idea what's going on.

"@testing-library/jest-dom": "5.11.4",
"@testing-library/react": "11.2.5",
"jest": "26.6.3",
"react-dom": "17.0.1",
Node 12.1.0 (though I also tried on 15.12.0)

[pahan35]

I also just faced with something related to this issue.

For me, it happens since version 7.29.5.

It looks like, in my case, there is something related to clearInterval() behavior.

When I run a single test, it works as expected.

However, when I run multiple tests, where I use code like,

function onReadyWithCleanup(cb) {
  let cleanupCb = () => {}
  const intervalId = setInterval(() => {
    if (window.someSideEffect) {
      cb()
      cleanupCb()
    }
  })
  cleanupCb = () => clearInterval(intervalId)
  return cleanupCb
}

function SomeComponent() {
  const [value, setValue] = useState('')
  useEffect(() => {
    const cleanupCb = onReadyWithCleanup(() => {
      setValue(`I'm ready!`)
    })
    return cleanupCb
  }, [])
}

it starts producing

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

[pahan35]

The root of my problem is here v7.29.4...v7.29.5#diff-49ba0c85360693b8e89ae0e0428284a55db749f08f2b9993d26910def646e02fR28-R32

I don't use fake timers, but usedJestFakeTimers is true, because we use core-js in the babelizing pipeline, even for a test environment.

When I excluded it from babel.config.js, everything started to work fine even with the latest version 7.30.4.

[eps1lon]

This issue should be fixed as of 7.30.4. If the issue persists, please open a new issue and include a reproduction. Otherwise we have to assume that you're pulling in an older version at some point.