酶模拟点击事件，导致 API 调用不起作用答案

【问题标题】：Enzyme simulate click event which makes API calls not working酶模拟点击事件，导致 API 调用不起作用
【发布时间】：2018-11-05 19:02:51
【问题描述】：

在我的一个项目React-Instagram-Clone-2.0 中，我添加了一项功能，使用户能够将其他用户添加到收藏夹。

我有一个测试模拟在按钮上完成的单击事件，该按钮发出 POST 请求并将用户添加到收藏夹。但它没有到达服务器，测试总是通过。

这里是代码。

Add-to-favourites.js

const AddToFavourites = ({ user, username }) => {

let add = e => {
  e.preventDefault()
  addToFavourites(user)   // util function
  new d('.af_btn').blur()
}

return (
  <div>
    <div className='recomm_teaser'>
      <span>Wanna add {username} to your favourites list.</span>
      <SecondaryButton
        label='Add'
        onClick={add}
      />
    </div>
  </div>
)
}

添加收藏功能

export const addToFavourites = async user => {
  let {
    data: { success, mssg }
  } = await post('/api/add-to-favourites', { user }) // POST request

  if (success) {
    insta_notify({
      to: user,
      type: 'favourites'
    })
  }

  console.log('Test debugging')  // Never logged
  // But I remove the request, The above message is logged out.
  Notify({ value: mssg })
  }

还有我的测试文件

describe('AddToFavourites Component', () => {

const comp = (
  <AddToFavourites
    user={7}
    username='ghalib'
  />
)

it('should match snapshot', () => {
  const tree = create(comp).toJSON()
  expect(tree).toMatchSnapshot()
})

it('should add user to favs when clicked', () => {
  const wrapper = mount(comp)

  wrapper.find('SecondaryButton').simulate(
    'click',
    { preventDefault() {} }
  )

  expect(true).toBe(true)
 })

})

有什么办法吗？

提前谢谢:)

【问题讨论】：

您似乎需要处理异步流。尝试将测试标记为async 并通过done arg - 你会看到done 永远不会调用的错误，但是让我们检查一下你是否会看到console.log：it('should add user to favs when clicked', async (done) => {
另外，post() 是什么？你如何包含它？
如果你认为这是一个单元测试，你不应该调用外部 url，要么模拟它，要么测试不涉及它的代码的另一部分。集成测试之前应该这样做，但测试的第一行是单元测试。

标签： javascript reactjs jestjs enzyme snapshot

【解决方案1】：

我可以在您的代码中看到几个问题。第一个问题是您使用的是异步方法。因此，在解决 API 调用之前，很有可能测试已经结束。你可以用setTimeout修复它：

it('should add user to favs when clicked', () => {
  const wrapper = mount(comp)

  wrapper.find('SecondaryButton').simulate(
    'click',
    { preventDefault() {} }
  )

  setTimeout(() => console.log("I'm dirty js hack"), 4500)

  expect(true).toBe(true)
 })

})

这里使用了 4500 毫秒，因为内部 Jest 限制为 5000 毫秒。但是你可以用设置来扩展它，所以你会看到第二个问题。

它位于 API 的相对路径中。我不认为 jest 在localhost 上运行，因此您将无法访问服务器。您需要模拟对服务器的请求，但我认为它是covered in documentation。虽然我认为您将无法避免 setTimeout，因为 API 调用是在内部进行的。

【讨论】：