玩笑在 jquery 选择器上调用的第三方函数上失败

Question

我有一个反应组件，它在jQuery 选择器上调用datatables.js 的dataTable() 函数。我也有相应的 jest 测试组件，但是，测试失败的函数抛出以下错误。

● components › <Page /> › check props matchs TypeError: (0 , _jquery2.default)(...).dataTable is not a function

Page.js 反应组件

import 'datatables.net-se'

class Page extends Component {

  componentDidMount() {

    $('.table').dataTable()
  }
 }

Page.test.js 玩笑组件（测试在 it 块中失败）

import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { configure, shallow, mount } from 'enzyme'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

import 'datatables.net-se'
jest.mock('datatables.net-se', () => ({ dataTable: jest.fn() }))

// Components 
import Page from '../../components/Customers/Page'

// Setups
const middlewares = [thunk] // add your middlewares like `redux-thunk`
const mockStore = configureMockStore(middlewares)

let store, props, component, wrapper

describe("<Page />", function() {  

  beforeEach(()=>{
    const storeStateMock = {
      customers: Customers
    }

    store = mockStore(storeStateMock)

    props = {
      fetchCustomers: jest.fn()
    }

    wrapper = mount(<BrowserRouter><Provider store={store}><Page {...props} /></Provider></BrowserRouter>)
  })

  it('renders connected component', function() { 

    expect(wrapper.find(Page).length).toEqual(1)
  })

})

}

Answer 1

在尝试了各种替代方案后，我通过将 dataTable 函数附加到 jQuery 来通过测试，如下所示。在应用程序方面，这没有任何区别。我可以将dataTable 导入为import 'datatables.net-se' 或$.fn.dataTable = require('datatables.net')，它在这两种情况下仍然有效。

页面组件

$.fn.dataTable = require('datatables.net')

class Page extends Component {

  componentDidMount() {    
    $('.table').dataTable()
  }
 }
 

Answer 2

看来你还是需要将挂载的组件附加到jsdom环境中，这样jquery才能找到它。见jquery doesn't work with jsdom/enzyme