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

原文 标签 jquery reactjs jestjs

我有一个调用 dataTable() 的 react 组件datatables.js 的功能在 jQuery选择器。我也有相应的组件的 jest 测试组件,但是,对抛出以下错误的函数的测试失败。
● components › <Page /> › check props matchsTypeError: (0 , _jquery2.default)(...).dataTable is not a function
Page.js react 组件

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)
  })

})

}

最佳答案

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

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

class Page extends Component {

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

关于jquery - jest 在 jquery 选择器上调用的第三方函数失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48776283/

相关文章:

reactjs - 如何使用 craco 为 Jest 设置别名

JavaScript 按属性对所有其他子元素排序,但是 (this)

jquery - 如何在jQuery.ajax中使用CSS3过渡回调

html - 在 JSX 中使用 css 变亮和变暗功能

reactjs - npm 安装 : Ecacess: permission denied

typescript - 编译时未定义的 TypeScript 枚举

javascript - 如何确定可见的jqGrid网格的ID?

javascript - 使用.filter()使用jQuery选择包含特定文本的tr的表行

node.js - 未处理的PromiseRejectionWarning : Error: Cannot find module '/MyProject/node_modules/react-native-scripts/build/scripts/init.js'

javascript - typescript 组件导入中的 Jest 测试 : Cannot find module,