Question

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

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

这是代码。

添加到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>
)
}

addToFavourites功能

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

})

任何解决方案？

Thnx提前：）

Answer 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的相对路径中。我认为玩笑不会在localhost上运行，因此您将无法访问服务器。您需要模拟对服务器的请求，但我认为它是covered in documentation。尽管我认为您将无法避免setTimeout，因为API调用是在内部进行的。

酶模拟点击事件，使API调用不起作用

1 个答案: