Tengo una aplicación de prueba de reacción mínima con el siguiente componente:

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

Esto funciona bien al cargarlo en el navegador (Chrome). Console.log () en componentDidMount () imprime 1 elemento helloDiv encontrado

Sin embargo, si ejecuto la prueba usando mocha + enzima + jsdom, el mismo console.log () en el componente de la aplicación imprime 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);
    });
});

Nota: No tengo ningún problema con esta prueba unitaria, está pasando. El verdadero problema es que cuando se monta usando la enzima, se llama a componentDidMount () pero la declaración console.log () dentro de ella imprime 0, en lugar de 1

Así es como ejecuto mocha:

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

¿Alguna idea de por qué jquery selector no encuentra nada en la prueba? No debería ser un problema de mocha porque ocurre el mismo problema si cambio a broma

6
Phuong Nguyen 10 feb. 2017 a las 17:00

3 respuestas

La mejor respuesta

Finalmente encontré el problema:

La enzima mount(<SomeComponent />) por defecto realizará la representación DOM completa pero no insertará el componente representado en el documento actual (JSDom). Es por eso que jQuery no puede encontrar ningún elemento en el documento actual

Para hacer una representación DOM completa y adjuntarla al documento actual:

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

Donde app está vacío div disponible cuando jsdom está configurado:

global.document = jsdom('<html><head></head><body><div id="app" /></body></html>');
7
Phuong Nguyen 14 feb. 2017 a las 06:00

No pude conseguir que la respuesta de Phuong Nguyen funcionara. Encontré la página relevante en los documentos de enzimas. Terminé con algo como, basado en el ejemplo final en esa página:

const div = global.document.createElement('div');
global.document.body.appendChild(graphDiv);
const wrapper = mount(<SomeComponent />, { attachTo: div });  // same as the other answer
// clean up after ourselves
wrapper.detach();
global.document.body.removeChild(div);
0
user60561 28 abr. 2017 a las 13:32

Debe haber alguna configuración realizada antes de que pueda jsdom con jquery en node-env.

Intenta esto si te ayuda.

Cree un archivo auxiliar de prueba como este:

test_helper.js

import _$ from 'jquery';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
const $ = _$(window);

chaiJquery(chai, chai.util, $);

export {expect};

Mientras corre -

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

U otra forma de usar jsdom-global sin el archivo test_helper.js.

npm install --save-dev jsdom-global

Luego :

import 'jsdom-global/register'; 

//at the top of file , even  , before importing react
0
WitVault 11 feb. 2017 a las 05:38