javascript - 如何将我的全局状态导入 react-testing-library？

Question

我的问题是当我尝试将弹出窗口的全局状态导入测试文件并尝试使用它时。然后它告诉我我使用错误的钩子并且它不起作用。

我的测试代码：

import React from 'react'
import Popup from '../Popup'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import 'mutationobserver-shim'
import { usePopupState } from '../../../constants/States'

describe('testing PopupComponent', () => {
  it('should add correctly', () => {
    const { setOpenPopup } = usePopupState()
    setOpenPopup(true)
    const { getByTestId } = render(<Popup />)
    expect(getByTestId('textfield-name')).toBeEmpty()
    expect(getByTestId('add-popup-container')).toBeInTheDocument()
  })
})

我的全球状态代码：

export interface IPopupState {
    openPopup: boolean,
    setOpenPopup:(state: boolean) => void
}

export const usePopupState = create<IPopupState>(set => ({
  openPopup: false,
  setOpenPopup: (state: boolean) => set({ openPopup: state }),
}))

如何使用 react-testing-library 解决这个问题？

标签： javascriptreactjstypescripttestingreact-testing-library