我有一个包含以下组件的最低测试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元素
但是,如果我使用摩卡+酶+ 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); }); });
注意:此单元测试没有问题,正在通过。 真正的问题是,当使用酶安装时,会调用componentDidMount(),但其中的console.log()语句将输出0,而不是1
这是我运行摩卡的方法:
mocha --require enzyme/withDom --compilers js:babel-core/register test/index.test.js
知道为什么jquery选择器在测试中找不到任何内容吗?它不应该是摩卡咖啡的问题,因为如果我开玩笑地会发生相同的问题
终于找到了问题:
mount(<SomeComponent />)默认情况下,酶将执行完整的DOM渲染,但不会将渲染的组件插入当前文档(JSm)。这就是为什么jQuery在当前文档中找不到任何元素的原因
mount(<SomeComponent />)
要进行完整的DOM渲染并附加到当前文档,请执行以下操作:
mount(<SomeComponent />, { attachTo: document.getElementById('app') });
app设置jsdom时,哪里有空div可用:
app
global.document = jsdom('<html><head></head><body><div id="app" /></body></html>');