enzym płytkie renderowanie tylko jeden węzeł w komponentach redux

Question

Płytki rendering enzymu zachowuje się w nieoczekiwany sposób, jeśli renderuję komponent redux z fałszywym sklepem.

Mam prosty test, który wygląda tak:

import React from 'react'; 
    import { shallow } from 'enzyme'; 
    import { createMockStore } from 'redux-test-utils'; 

    import Test from './Test' 

    it('should render ',() => { 
    const testState = { 
     app: { 
     bar: ['a', 'b', 'c'] 
     } 
    }; 

    const store = createMockStore(testState) 
    const context = { 
     store, 
    }; 
    const shallowComponent = shallow(<Test items={[]}/>, {context}); 

    console.log(shallowComponent.debug()); 

    } 

Komponent testowy wygląda następująco:

class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
export default Test; 

które zgodnie z oczekiwaniami wypisuje to:

<div className="here" /> 

Jednak jeśli moim komponentem jest komponent redux:

class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
const mapStateToProps = state => { 
    return { 
    barData: state.app.bar 
    } 
} 

export default connect(
    mapStateToProps 
)(Test) 

To co mam w konsoli to:

<BarSeriesListTest items={{...}} barData={{...}} dispatch={[Function]} /> 

Dlaczego istnieje ta różnica? Jak mogę przetestować, czy mój komponent został w nim osadzony w mojej wersji redux komponentu?

Answer 1

Odwołujesz się do HOC, który zwraca connect, a nie do składnika, który chcesz przetestować.

Powinieneś użyć funkcji enzymu dive, która wyrenderuje element potomny i zwróci go jako opakowanie.

const shallowComponent = shallow(<Test items={[]}/>, {context}).dive();

Można go używać wielokrotnie, jeśli masz wiele elementów, które trzeba nurkować przez dostać. To lepsze niż używanie mount, ponieważ wciąż testujemy w izolacji.

Answer 2

Należy wyeksportować niepodłączonych komponent i przetestować go osobno (zawiadomienie pierwsze export):

export class Test extends React.Component { 

} 
... 
export default connect(
    mapStateToProps 
)(Test) 

Choć w teście należy przetestować renderowania niezwiązanego składnika jak tak (zauważyć nawiasów klamrowych wokół { Test }):

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

describe('...',() => { 
    it('...',() => { 
    const wrapper = shallow(<Test />) 
    expect(toJson(wrapper)).toMatchSnapshot(); 
    }) 
}) 

Mam nadzieję, że to pomoże.

Tryb specjalnie dla opisanego przypadku komponent powinien być:

import React from 'react'; 
import { connect } from 'react-redux'; 

export class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
const mapStateToProps = state => { 
    return { 
    barData: state.app.bar 
    } 
} 

export default connect(
    mapStateToProps 
)(Test) 

Spec badanie powinno być:

import React from 'react'; 
import { shallow } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import { Test } from 'Test'; 

describe('Test component',() => { 
    it('renders',() => { 
    const wrapper = shallow(<Test />); 
    expect(toJson(wrapper)).toMatchSnapshot(); 
    }); 
}); 

który generuje następujący snapshot:

exports[`Test component renders 1`] = ` 
<div 
    className="here" 
/> 
`; 

Answer 3

Jesteś eksportowanie podłączonego komponentu domyślnie. Możesz zaimportować komponent, który nie jest połączony z redux.

import { Test } from './Test'; 

Następnie twój test powinien zadziałać.