我有一个包含以下组件的最低测试React应用程序:
import React from 'react';
import $ from 'jquery';
export default class App extends React.Component {
componentDidMount() {
console.log('componentDidMount', $('#helloDiv').length);
}
render() {
return <div id='helloDiv'>
Hello React!
</div>;
}
}
在浏览器(Chrome)中加载该文件时效果很好。 componentDidMount()中的console.log()打印出找到的1个helloDiv元素
但是，如果我使用摩卡+ 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(<App />);
expect(app.find('#helloDiv').length).to.eq(1);
});
});
注意:此单元测试没有问题，正在通过。真正的问题是，使用 enzyme 安装时，会调用componentDidMount()，但其中的console.log()语句会打印出0，而不是1
这是我如何运行摩卡咖啡:
mocha --require enzyme/withDom --compilers js:babel-core/register test/index.test.js
知道为什么jquery选择器在测试中找不到任何内容吗？这不应该是摩卡咖啡的问题，因为如果我开玩笑的话，也会发生相同的问题
最佳答案
终于找到了问题:
默认情况下， enzyme mount(<SomeComponent />)将执行完整的DOM渲染，但不会将渲染的组件插入当前文档(JSm)。这就是为什么jQuery在当前文档中找不到任何元素的原因
要进行完整的DOM渲染并附加到当前文档，请执行以下操作:
mount(<SomeComponent />, { attachTo: document.getElementById('app') });
设置jsdom时，
app为空div可用:global.document = jsdom('<html><head></head><body><div id="app" /></body></html>');
关于javascript - jQuery不适用于jsdom/enzyme，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42161238/