Jest.js React单元测试失败

btqmn9zl  于 11个月前  发布在  Jest
关注(0)|答案(1)|浏览(179)

我有一个用react jest编写的单元测试,由于未知的原因,它失败了。

it('handles filter addition and removal', async () => {
const addNewButton = await screen.findByText('actions.addNew')

await act(async () => {
  userEvent.click(addNewButton)

  const compareDropdown = await waitFor(() => screen.getByTestId('dimensionDropdown'), { timeout: 5000 })
  userEvent.click(compareDropdown)

  const optionSelect = await screen.findByRole('option')
  userEvent.click(optionSelect)

  const treeSelect = await screen.findByTestId('dimensionValues')
  userEvent.click(treeSelect)

  const optionTreeSelect = await screen.findByRole('treeitem')
  userEvent.click(optionTreeSelect)

  const submitButton = await screen.findByTestId('filtersSubmit')
  userEvent.click(submitButton)

  await waitFor(() => {
    const chips = screen.queryByTestId('filterChips0')
    expect(chips).toBeInTheDocument()
  })

  const chips = screen.getByTestId('filterChips0')
  const chipsContent = chips.querySelector('p') as HTMLElement

  expect(chipsContent).toHaveTextContent('Department = test-1')

  const removeButton = await screen.findByTestId('removeFilterChips')
  userEvent.click(removeButton)

  await waitFor(() => {
    const chips = screen.queryByTestId('filterChips0')
    expect(chips).not.toBeInTheDocument()
  })
})
  })

字符串
我收到的警告是

Warning: An update to DomainFilterWindow inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */


但是找不到原因,好像是我把DOM的变化 Package 到act里面了,但是还是收到了错误

q43xntqr

q43xntqr1#

我使用的是React Native测试库,所以可能会有一些细微的差异。但是我相信你必须用userEvent.setup来设置用户。user.click已经在act中 Package 了,它是JavaScript,所以你不应该重新 Package 它,而是应该直接等待它。我认为问题在于你所有的代码都在act()中。你还定义了3个名为filterChips的常量,我认为你不想这样做。我认为它应该看起来更像这样:

const user = userEvent.setup();

it('handles filter addition and removal', async () => {
  renderScreen() // I don't see where you do this, but it is best practice to have it inside your test.
  
  const addNewButton = await screen.findByText('actions.addNew')
  await user.click(addNewButton)

  const compareDropdown = screen.getByTestId('dimensionDropdown')
  await user.click(compareDropdown)

  const optionSelect = await screen.findByRole('option')
  await user.click(optionSelect)

  const treeSelect = await screen.findByTestId('dimensionValues')
  await user.click(treeSelect)

  const optionTreeSelect = await screen.findByRole('treeitem')
  await user.click(optionTreeSelect)

  const submitButton = await screen.findByTestId('filtersSubmit')
  await user.click(submitButton)

  const chips = screen.getByTestId('filterChips0')
  expect(chips).toBeInTheDocument()

  const chipsContent = chips.querySelector('p') as HTMLElement
  expect(chipsContent).toHaveTextContent('Department = test-1')

  const removeButton = await screen.findByTestId('removeFilterChips')
  await userEvent.click(removeButton)

  expect(screen.queryByTestId('filterChips0')).toBeNull()
})

字符串

相关问题