首页 > 编程语言> > javascript-jQuery不适用于jsdom / enzyme

javascript-jQuery不适用于jsdom / enzyme

2019-10-26 07:45:34 作者：互联网

我有一个包含以下组件的最低测试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选择器在测试中找不到任何内容吗？这不应该是摩卡咖啡的问题,因为如果我开玩笑地会发生相同的问题

解决方法:

终于找到了问题：

默认情况下,酶挂载(< SomeComponent />)会执行完整的DOM呈现,但不会将呈现的组件插入当前文档(JSm).这就是为什么jQuery在当前文档中找不到任何元素的原因

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

mount(<SomeComponent />, { attachTo: document.getElementById('app') });

设置jsdom时,应用为空div可用：

global.document = jsdom('<html><head></head><body><div id="app" /></body></html>');

标签：enzyme,reactjs,jsdom,javascript,jquery
来源： https://codeday.me/bug/20191026/1935114.html