jquery不适用于jsdom / enzyme

我有一个最小的测试反应应用程序与以下组件：

import React from 'react'; import $ from 'jquery'; export default class App extends React.Component { componentDidMount() { console.log('componentDidMount', $('#helloDiv').length); } render() { return 
 Hello React! 
; } } 

这在浏览器（Chrome）中加载时工作正常。 componentDidMount（）中的console.log（）打印出找到的1个helloDiv元素

但是，如果我使用mocha + enzyme + jsdom运行测试，则App组件中的相同console.log（）会输出0：

 import React from 'react'; import { mount } from 'enzyme'; import { expect } from 'chai'; import App from '../src/client/app/first' describe('first test', () => { it('should pass', () => { const app = mount(); expect(app.find('#helloDiv').length).to.eq(1); }); }); 

注意：我对这个unit testing没有问题，它正在通过。 真正的问题是当使用酶挂载时，调用componentDidMount（）但是其中的console.log（）语句打印出0而不是1

以下是我运行mocha的方法：

 mocha --require enzyme/withDom --compilers js:babel-core/register test/index.test.js 

知道为什么jquery选择器在测试中找不到任何东西吗？ 它不应该是摩卡问题，因为如果我改为开玩笑也会出现同样的问题

Answer 1

终于找到了问题：

默认情况下，酶mount()将执行完整的DOM渲染，但不会将渲染的组件插入当前文档（JSDom）。 这就是jQuery无法在当前文档中找到任何元素的原因

要执行完整DOM渲染并附加到当前文档：

 mount(, { attachTo: document.getElementById('app') }); 

设置jsdom时， app为空div的位置：

 global.document = jsdom('
'); 

Answer 2

在node-env中使用jquery之前需要进行一些设置。

如果它有帮助，试试这个。

像这样创建一个测试帮助文件 –

test_helper.js

 import _$ from 'jquery'; import jsdom from 'jsdom'; import chai, { expect } from 'chai'; import chaiJquery from 'chai-jquery'; global.document = jsdom.jsdom(''); global.window = global.document.defaultView; global.navigator = global.window.navigator; const $ = _$(window); chaiJquery(chai, chai.util, $); export {expect}; 

在跑步的时候 –

 mocha --require enzyme/withDom --compilers js:babel-core/register --require test/test_helper.js test/index.test.js 

或者使用jsdom-global而不使用test_helper.js文件。

 npm install --save-dev jsdom-global 

然后 ：

 import 'jsdom-global/register'; //at the top of file , even , before importing react 

Answer 3

我无法得到Phuong Nguyen的工作答案 。 我确实找到了酶文档中的相关页面 。 基于该页面上的最后一个例子，我最终得到了类似的东西：

 const div = global.document.createElement('div'); global.document.body.appendChild(graphDiv); const wrapper = mount(, { attachTo: div }); // same as the other answer // clean up after ourselves wrapper.detach(); global.document.body.removeChild(div);