Come testare se un componente React contiene un altro componente con jest?

Question

Sto provando a usare jest-cli per verificare se un componente reagisce contiene un altro componente nel suo output. Sto avendo problemi a capire come farlo.

Qui sono i miei componenti:

DesignerPage componenti

[...] 
var TopBar = require('../components/layout/TopBar.js'); 

var DesignerPage = React.createClass({ 
    getInitialState: function() { 
    var state = { 
    }; 
    return state; 
    }, 
    render: function() { 
    return (
     <div> 
     <TopBar /> 
     </div> 
    ) 
    } 
}); 

module.exports = DesignerPage; 

topbar Componente

/** @jsx React.DOM */ 
var React = require("react"); 

var TopBar = React.createClass({ 
    render: function() { 
     return (
      <nav className="top-bar"> 
      </nav> 
     ); 
    } 
}); 

module.exports = TopBar; 

Ora, voglio verificare se il componente DesignerPage contiene il componente topbar. Ecco quello che penso dovrebbe funzionare:

/** @jsx React.DOM */ 
jest.dontMock('../../src/js/pages/DesignerPage.js'); 
describe('DesignerPage', function() { 
    it('should contain a TopBar', function() { 
    var React = require('react/addons'); 
    var DesignerPage = require('../../src/js/pages/DesignerPage.js'); 
    var TestUtils = React.addons.TestUtils; 

    // Render a DesignerPage into the document 
    var page = TestUtils.renderIntoDocument(
     <DesignerPage /> 
    ); 

    // Verify that a TopBar is included 
    var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar'); 
    expect(topbar.length).toBe(1); 
    }); 
}); 

Ma non passa ... :(

$ ./node_modules/jest-cli/bin/jest.js DesignerPage 
Found 1 matching test... 
FAIL __tests__/pages/DesignerPage-test.js (4.175s) 
● DesignerPage › it should contain a TopBar 
    - Expected: 0 toBe: 1 
     at Spec.<anonymous> (__tests__/pages/DesignerPage-test.js:16:27) 
     at Timer.listOnTimeout [as ontimeout] (timers.js:112:15) 
1 test failed, 0 test passed (1 total) 
Run time: 6.462s 

Answer 1

io non ho eseguito il codice in questione, ma la linea:

var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar'); 

sembra sospetto a me. Il docs sembrano suggerire che si dovrebbe passare un componentClass piuttosto che una stringa.

Non vedo come sia possibile utilizzare la stringa per identificare il tipo di componente. Potrebbe potenzialmente utilizzare lo displayName per identificarlo per stringa, ma dubito che lo farebbe.

voi mi sa probabilmente vogliono questo:

var TopBar = require('../../src/js/pages/DesignerPage'); 
var topbar = TestUtils.scryRenderedComponentsWithType(page, TopBar); 

Answer 2

mi sono imbattuto in una situazione simile in cui avevo bisogno di controllare se il componente figlio era stato reso o meno. Per quanto ne so, i mock jest richiedono tutti i moduli tranne quello in cui si specifica di no. Quindi nel tuo caso verrà deriso il componente figlio Topbar, il che mi induce ad indovinare che il DOM renderizzato non sarà come previsto.

Per quanto riguarda la verifica se il componente bambino è stato reso lo farei

expect(require('../../src/js/component/layout/TopBar.js').mock.calls.length).toBe(1) 

che controlla in fondo se il componente figlio deriso è stato richiamato o meno.

Se davvero si vuole testare uscita topbar del componente a questo livello probabilmente vorrebbe impostare

jest.dontMock('../../src/js/component/layout/TopBar.js') 

così dire scherzo di non prendere in giro la componente topbar, in modo che il reso DOM include anche l'output dal componente TopBar.

Ho creato un repository basato sul vostro esempio su Github che verifica i componenti figlio. Esistono due file di test: un test per i componenti figlio che vengono simulati e l'altro non prende in giro il componente figlio.