Question

我正在尝试测试依赖于连接到服务器以在其构造函数中检索数据的商店的组件。我正在使用Jest和Enzyme。

该组件如下所示：

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'

@inject('Store')
@observer
class ExampleComponent extends Component {
  get words() {
    return this.props.Store.words
  }

  render() {
    return (
      {this.words.map(word => <div>word</div>)}
    )
  }
}

export default ExampleComponent

商店看起来像这样：

import { action, observable } from 'mobx'
import Collection from './Collection'

class CensorStore {
  constructor() {
    Collection.getWords().then(action(words => { this.words = words }))
  }

  @observable words = ''
}

export default new CensorStore()

集合看起来像这样：

import connection from './connection.jsx

const getWords = async () => {
  const response = await.connection.get('/getURl')

  return response.data.data
}

export default { getWords }

我想通过以下操作对其进行测试：

import React from 'react'
import { shallow } from 'enzyme'
import ExampleComponent from './ExampleComponent'
import Store from './Store'

it('renders correctly', () => {
  const wrapper = shallow(<ExampleComponent Store={Store} />

  expect(wrapper).toMatchSnapShot()
}

问题在于，当我导入Store时，该存储触发了一系列导入，这些导入最终到达连接并发起get请求。我该如何预防？我知道我可以模拟该连接，但这是否可以模拟在导入周期中很深的连接？任何帮助是极大的赞赏。

如何模拟发生在导入树深处的服务器调用？

0 个答案: