使用Jest和create-react-app测试React异步

麦克默德

我似乎无法弄清楚这一点。我正在使用create-react-app,它内置在测试运行程序Jest中。对于所有同步代码而言,它似乎都可以很好地工作,但是当模拟承诺时,我似乎无法使其正常工作。

react组件具有一种我可以模拟提交的形式。

反应组件代码片段。

//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库返回一个Promise。我没有使用它,而是使用__mocks__/API_V2.js了它。看起来像这样

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

我的模拟测试代码似乎从未运行过。如果我记录了模拟功能,我会得到function auth() {return mockConstructor.apply(this,arguments);}

我已经尝试按照https://facebook.github.io/jest/docs/tutorial-async.html的说明进行操作,但似乎没有调用我的模拟方法。实际方法也不是。相反,我的电话auth()返回未定义。

谁有想法?

-补充信息-

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 }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

异步组件时使用React的Jest和酶进行测试

React Jest 异步测试

使用Create React App配置Jest在测试之间重置模拟

React Native 异步 Jest 组件测试

如何使用Node(express.js)后端和create-react-app作为前端运行Jest测试

使用React和Jest测试React中的组件功能

如何使用Jest和React测试库测试className

如何使用 Jest 和 React 测试库测试 className

使用create-react-app通过JEST运行测试时,不会显示TypeScript错误

React Jest 如何测试正在调用的外部异步等待函数?

使用Jest测试React componentWillUnmount

使用Jest和React JS TestUtils测试表单

如何使用React Redux和Jest测试mapStateToProps?

开始使用Enzyme和Jest测试React组件

如何使用Jest和Enzyme测试React中的功能

使用 Enzyme 和 Jest 在 React 中测试处理更改功能

使用 jest 和 react-testing-library 测试连接的组件

React Native中的Jest和异步存储

使用异步/等待的create-react-app和JavaScript依赖项无法编译

使用 react-query 和 axios 测试 React 组件中的错误的问题。使用 React 测试库、Jest、MSW 进行测试

如何在Create React App中使用Enzyme和Jest从已安装的组件中读取console.log

create-react-app 测试“React 未定义”

使用Firebase TestLab测试React Native App

使用create-react-app调试Jest单元测试不会在VSCode中达到断点

用Jest和酶测试React Router

如何使用Create React App运行特定测试

在Create React App上使用Travis运行Puppeteer测试

TypeError:使用react-create-app玩笑和酶进行测试时,调度不是函数

使用React,React-Router,Jest和Enzyme测试状态变化