如何等待会话超时模式出现在React测试库中？

Question

当用户空闲 25 分钟后，我的应用程序中会出现一个模式。我怎样才能让这个模态出现在 Jest 中？

这是我的测试结果：

render(<App />);

// Wait 25.5 minutes
setTimeout(() => {}, 1530000);

screen.debug();

我尝试过的其他事情：

jest.useFakeTimers();
jest.advanceTimersByTime(1530000);

render(<App />);

screen.debug();

我期望在调试屏幕时出现模式，但它没有出现。知道我怎样才能做到这一点吗？

Answer 1

这是与您的场景类似的一个示例：

// MyComponent.jsx
import React, { useState, useEffect } from 'react'
import Modal from 'react-modal'

export const MyComponent = () => {
  const [isIdle, setIsIdle] = useState(false)
  const [modalIsOpen, setModalIsOpen] = useState(false)

  const resetTimer = () => {
    setIsIdle(false)
  }

  useEffect(() => {
    let idleTimer

    const setTimer = () => {
      idleTimer = setTimeout(() => {
        setIsIdle(true)
        setModalIsOpen(true)
      }, 1500000)
    }

    setTimer()

    const resetTimerOnActivity = () => {
      document.addEventListener('mousemove', resetTimer)
      document.addEventListener('keydown', resetTimer)
      document.addEventListener('click', resetTimer)
      document.addEventListener('scroll', resetTimer)
    }

    resetTimerOnActivity()

    return () => {
      clearTimeout(idleTimer)
      document.removeEventListener('mousemove', resetTimer)
      document.removeEventListener('keydown', resetTimer)
      document.removeEventListener('click', resetTimer)
      document.removeEventListener('scroll', resetTimer)
    }
  }, [])

  return (
    <div>
      <h1>Your App</h1>
      {isIdle && (
        <Modal isOpen={modalIsOpen}>
          <div data-testid='modal'>
            <p>You have been idle for 25 minutes.</p>
            <button onClick={() => setModalIsOpen(false)}>Close Modal</button>
          </div>
        </Modal>
      )}
    </div>
  )
}

上面是我的组件的代码，当用户闲置 25 分钟时打开弹出窗口。

这是我的测试文件

// MyComponent.test.js
import { act, render } from "@testing-library/react"
import React from "react"
import { MyComponent } from "./MyComponent"

describe('My Component', () => {
  it('Should open modal is user remains idle for 25 mins', () => {
    jest.useFakeTimers()
    const { getByTestId } = render(<MyComponent />)
    act(() => {
      jest.advanceTimersByTime(15000000) // advance timer by 25 mins
    })
    expect(getByTestId('modal')).toBeInTheDocument()
  })  
})

结果

希望对你有帮助！！