Enzym rendert eingewickelte Komponente eher als Grundbestandteil

Question

Ich bin Schnappschuss, der meine React App mit Jest und Enzym prüft. Ich versuche, eine testbare Version meiner Komponente zu exportieren, die nicht in einer Komponente höherer Ordnung enthalten ist.

Ich möchte dann die umschlossene Komponente exportieren, damit meine App sie verwenden kann, und auch eine testbare Version, d. H. Eine nicht umwickelte Version meiner Komponente.

Dies ist meine Komponente:

NavBar.jsx

const NavBar = ({props}) => {(
    <div>...</div> 
)} 

export { NavBar as TestableNavBar }; 

export default withStyles(styles)(NavBar); 

NavBar.test.js

import React from 'react'; 
import { shallow } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import { TestableNavBar } from './NavBar'; 

const props = { 
    ... 
}; 

describe('Navbar',() => { 
    it('should render correctly',() => { 
    const wrapper = shallow(<TestableNavBar {...props} />); 
    const tree = toJson(wrapper); 
    expect(tree).toMatchSnapshot(); 
    }); 
}); 

Die oben einen Schnappschuss erzeugt, der wie folgt aussieht:

<div> 
    <withStyles(AppBar) 
    className="" 
    > 
    <withStyles(Toolbar) 
     disableGutters={true} 
    > 
     <withStyles(IconButton) 
     aria-label="open drawer" 
     className="" 
     color="contrast" 
     onClick={[Function]} 
     > 
     ... 
</div> 

Ich kann nicht wirklich verstehen, warum es immer noch versucht, die HOC zu rendern?

Answer 1

Enzyme's shallow Methode macht nur die angemeldeten Kinder in Methode render (AppBar, Toolbar, und so weiter), und die Ausgabe zeigt, dass sie von der gleichen withStyles HOC eingewickelt werden.

Durch das Exportieren der testbaren Version Ihrer Root-Komponente können Sie die tatsächliche Ausgabe tatsächlich testen (div), aber nicht verhindern, dass die untergeordnete Komponente von withStyles HOC umschlossen wird.

Wenn Sie die endgültige Ausgabe Ihrer Komponente testen möchten, können Sie die Rendermethode Enzyme's mount verwenden.