Jest.js React单元测试失败

btqmn9zl 于 11个月前发布在 Jest

关注(0)|答案(1)|浏览(183)

我有一个用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里面了，但是还是收到了错误

jestjs

来源：https://stackoverflow.com/questions/77528187/react-unit-test-failing

1条答案

按热度按时间

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()
})

字符串

赞(0）回复(0）举报 11个月前

我来回答

Jest.js React单元测试失败

1条答案

相关问题

热门标签

最新问答