web-dev-qa-db-fra.com

Quand utiliser le rendu superficiel dans les tests Enzyme / React?

avant de poster cette question, j’ai essayé de faire une recherche dans sqa stackexchange mais je n’ai trouvé aucun article sur la faible profondeur et l’a rendu ici; j’espère donc que l’on pourra m'aider ici.

Quand devrais-je utiliser peu profonde et rendre dans tester réagir composants? Sur la base de la documentation airbnb, j'ai émis quelques opinions sur la différence entre les deux:

  1. Étant donné que peu profonde teste les composants en tant qu’unité, elle devrait donc être utilisée pour les composants "parents". (ex. Tables, emballages, etc.)

  2. Le rendu concerne les composants enfants.

La raison pour laquelle j'ai posé cette question, c'est que j'ai du mal à trouver celle que je devrais utiliser (bien que les docs disent qu'ils sont très similaires)

Alors, comment savoir lequel utiliser dans un scénario spécifique?

testingmeteorreactjschaienzyme
85
Cyval

Selon l'enzyme docs :

mount(<Component />) pour le rendu Full DOM est idéal pour les cas d'utilisation de composants pouvant interagir avec des apis DOM ou nécessitant le cycle de vie complet pour tester complètement le composant (par exemple, composantDidMount, etc.).

vs.

shallow(<Component />) pour le rendu peu profond est utile pour vous contraindre à tester un composant comme une unité et pour vous assurer que vos tests ne permettent pas d'affirmer indirectement le comportement des composants enfants.

vs.

render qui est utilisé pour rendre les composants de réaction en HTML statique et analyser la structure HTML résultante.

Vous pouvez toujours voir les "nœuds" sous-jacents dans un rendu peu profond. Vous pouvez par exemple faire quelque chose comme cet exemple (légèrement artificiel) en utilisant AVA comme exécuteur de spécifications:

let wrapper = shallow(<TagBox />);

const props = {
    toggleValue: sinon.spy()
};

test('it should render two top level nodes', t => {
    t.is(wrapper.children().length, 2);
});

test('it should safely set all props and still render two nodes', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test('it should call toggleValue when an x class is clicked', t => {
    wrapper.setProps({...props});
    wrapper.find('.x').last().simulate('click');
    t.true(props.toggleValue.calledWith(3));
});

Notez que rend , le réglage des accessoires et la recherche de sélecteurs et même les événements synthétiques sont tous pris en charge par un rendu peu profond, de sorte que la plupart du temps, vous pouvez simplement l'utiliser.

Toutefois, vous ne pourrez pas obtenir le cycle de vie complet du composant. Par conséquent, si vous vous attendez à ce que les choses se passent dans composantDidMount, vous devez utiliser mount(<Component />);

Ce test utilise Sinon pour espionner le componentDidMount du composant

test.only('mount calls componentDidMount', t => {

    class Test extends Component {
        constructor (props) {
            super(props);
        }
        componentDidMount() {
            console.log('componentDidMount!');
        }
        render () {
            return (
                <div />
            );
        }
    };

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount');
    const wrapper = mount(<Test />);

    t.true(componentDidMount.calledOnce);

    componentDidMount.restore();
});

Ce qui précède ne passera pas avec rendu peu profond ou rendu

render ne vous fournira que le code HTML, vous pouvez donc toujours faire des choses comme ceci:

test.only('render works', t => {

    // insert Test component here...

    const rendered = render(<Test />);
    const len = rendered.find('div').length;
    t.is(len, 1);
});

j'espère que cela t'aides!

143
4m1r

La différence entre shallow () et mount () est que shallow () teste les composants indépendamment des composants enfants qu'ils rendent, tandis que mount () approfondit et teste les enfants d'un composant. Pour shallow (), cela signifie que si le composant parent restitue un autre composant dont le rendu échoue, un rendu shallow () sur le parent passera quand même.

6
Shyam Kumar