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

Question

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

? 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 jest 组件（测试在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'or$.fn.dataTable = require('datatables.net')并且在这两种情况下仍然有效。

页面组件

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

class Page extends Component {

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