javascript – 使用Jest和create-react-app测试React Async

我似乎无法想出这个.我正在使用create-react-app,它是在测试运行器Jest中构建的.对于所有同步代码,它似乎工作得很好,但是当嘲笑承诺时,我似乎无法让它工作.

反应组件具有我能够模拟提交的形式.

反应组件代码段.

//Top of the page
import {auth} from '../../lib/API_V2'
// ... //

// Handle submit runs when the form is submitted
handleSubmit = (event) => {
  console.log('submit')
  event.preventDefault()
  this.setState(prevState => ({
    ...prevState,
    loading: true
  }))
  console.log('stateSet')
  auth(this.state.userName, this.state.password)
    .then(results => {
      // NEVER RUNS
      console.log('then')
      // stuff omitted
      this.setState(prevState => ({
        ...prevState,
        loading: false
      }))
      this.props.afterAuth()
    })
  .catch(() => {
    // also never runs
    // omitted
    this.setState(prevState => ({
      ...prevState,
      loading: false
    }))
    this.props.afterAuth()
  })
}

测试代码

jest.mock('../../lib/API_V2')
it.only(`should mock a login`, () => {
  const myMock = jest.fn()
  const authComp = mount(<AuthComponent afterAuth={myMock}/>)

  authComp.find('.userName').simulate('change', {target: {value: 'userName'}})
  authComp.find('.password').simulate('change', {target: {value: 'password'}})
  expect(authComp.state().userName).toEqual('userName')
  expect(authComp.state().password).toEqual('password')
  authComp.find('[type="submit"]').get(0).click()
  expect(myMock.mock.calls.length).toBe(1) // FAILS
})

API lib返回一个promise.而不是使用它,我旁边有一个__mocks __ / API_V2.js.看起来像这样

function auth (lastname, accountNumber) {
  console.log('yay!?')
  return new Promise((resolve) => {
    resolve({
      accountNumber,
      lastName: lastname
    })
  })
}     

我的模拟测试代码似乎永远不会运行.如果我记录模拟函数,我得到函数auth(){return mockConstructor.apply(this,arguments);}

我试图遵循https://facebook.github.io/jest/docs/tutorial-async.html的说明,但好像我的模拟方法没有被调用.实际方法也不是.相反,我对auth()的调用返回undefined.

有人有主意吗？

– 补充资料 –

src
  Components
    AuthComponent
      AuthComponent.js
      AuthComponent.test.js
      index.js
  Lib
    API_V2
      API_V2.js
      index.js
      __mocks__
        API_V2.js

解决方法:

我认为你遇到了与此问题相关的错误：https://github.com/facebook/jest/issues/2070

由于您实际上是在尝试导入名为API_V2 / index.js的文件,因此需要模拟index.js.但是,这样做会非常糟糕,因为它对于您尝试模拟的每个index.js文件都是有效的模拟.

目前执行此操作的最佳方法是重写一些代码以使用依赖注入并将模拟传递给需要使用的任何内容{auth}

标签：javascript,reactjs,jestjs,create-react-app
来源： https://codeday.me/bug/20190608/1197748.html