reactjs - TypeError：无法读取未定义测试库 + Jest 的属性“关闭”

Question

我创建了一个组件，它有两个按钮和它们各自的 Chakra UI 点击事件。

所以我创建了一个简单的测试，想法是生成快照然后点击事件，但是出现以下错误。

TypeError: Cannot read property 'off' of undefined

在那种情况下，我应该做一个模拟还是什么？如果是，会怎样？

组件

export const Buttons = ({children}: ButtonsProps) => {
  const {flag, setFlag} = useContext(Local.ContextCalculator)
  const {t} = useTranslation('comp_calculator')

  return (
    <>
      <C.Stack
        spacing={2}
        direction={'row'}
        align={'center'}
        justify={'center'}
      >
        <C.Button variant={'ghost'} size={'lg'} onClick={setFlag.off}>
          {t('buttons.clear')}
        </C.Button>

        <C.Button
          type={'submit'}
          colorScheme={'primary'}
          size={'lg'}
          onClick={setFlag.on}
        >
          {t('buttons.calculate')}
        </C.Button>
      </C.Stack>

      {flag && (
        <C.Stack spacing={8} data-testid={'result-table-calculator'}>
          {children}
        </C.Stack>
      )}
    </>
  )
}

测试

describe('Buttons', () => {
  const {Buttons} = jest.requireActual(
    '../../../src/components/calculator/Buttons'
  )

  afterEach(() => {
    Lib.resetAll()
  })

  it('renders as expect', async () => {
    const view = Lib.render(<Buttons />)
    expect(view.asFragment()).toMatchSnapshot()

    Lib.fireEvent.click(Lib.screen.getByText(/buttons\.calculate/i))
    await Lib.screen.findByTestId('result-table-calculator')

    Lib.fireEvent.click(Lib.screen.getByText(/buttons\.clear/i))
    expect(
      Lib.screen.queryByTestId('result-table-calculator')
    ).not.toBeInTheDocument()
  })
})

标签： reactjsjestjsreact-testing-librarychakra-ui