Quando você deve usar renderização e raso em testes de enzima / reação?

95

antes de postar esta questão, tentei pesquisar em sqa stackexchange, mas não encontrei nenhuma postagem sobre raso e renderização lá, então espero que alguém possa me ajudar aqui.

Quando devo usar raso e render no teste de componentes de reação? Com base nos documentos do airbnb, fiz algumas opiniões sobre a diferença entre os dois:

  1. Uma vez que raso está testando componentes como uma unidade , ele deve ser usado para componentes 'pais'. (por exemplo, tabelas, invólucros, etc.)

  2. Render é para componentes filhos.

A razão pela qual fiz esta pergunta é que estou tendo dificuldade para descobrir qual devo usar (embora os documentos digam que são muito semelhantes)

Então, como faço para saber qual usar em um cenário específico?

Cyval
fonte
2
A diferença entre shallow () e mount () é que shallow () testa os componentes isolados dos componentes filhos que eles renderizam, enquanto mount () vai mais fundo e testa os filhos de um componente. Para raso (), isso significa que se o componente pai renderizar outro componente que não consegue renderizar, então uma renderização rasa () no pai ainda será aprovada.
Shyam Kumar de

Respostas:

160

De acordo com os documentos Enzyme :

mount(<Component />) para Full DOM render é ideal para casos de uso onde você tem componentes que podem interagir com DOM apis, ou pode exigir o ciclo de vida completo para testar totalmente o componente (ou seja, componentDidMount etc.)

vs.

shallow(<Component />) para a renderização superficial é útil para restringir-se a testar um componente como uma unidade e para garantir que seus testes não estejam afirmando indiretamente sobre o comportamento de componentes filhos.

vs.

renderque é usado para renderizar componentes de reação ao HTML estático e analisar a estrutura HTML resultante.

Você ainda pode ver os "nós" subjacentes em uma renderização rasa, então, por exemplo, você pode fazer algo como este exemplo (ligeiramente artificial) usando AVA como o executor de especificação:

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

Observe que a renderização , configuração de adereços e localização de seletores e até eventos sintéticos são suportados pela renderização superficial, então na maioria das vezes você pode apenas usar isso.

Mas, você não será capaz de obter o ciclo de vida completo do componente, então se você espera que algo aconteça no componentDidMount, você deve usar mount(<Component />);

Este teste usa o Sinon para espionar o componentecomponentDidMount

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

O texto acima não passará com renderização superficial ou renderização

render fornecerá apenas o html, então você ainda pode fazer coisas como esta:

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

    // insert Test component here...

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

espero que isto ajude!

4m1r
fonte
1
Eu ainda não entendi 100%, porque os três verbos trazem métodos diferentes com eles. Por exemplo, pode-se usar wrapper.getNode () em raso, mas não em render. alguma explicação / link / docs / blogs, que me ajudem a conseguir isso?
Paulquappe
@HenryZhu deve estar claro nos documentos que a renderização é mais complexa do que superficial, já que na verdade tenta imitar a árvore DOM para aquele nó de componente específico
AGE
11
a migração de enzimas de v2 para v3 ativou os
Abhinav
Uma boa explicação adicional das diferenças está aqui github.com/airbnb/enzyme/issues/465#issuecomment-227697726 e aqui github.com/airbnb/enzyme/issues/465#issuecomment-229116418
Dmitry Gonchar
9

A diferença entre shallow () e mount () é que shallow () testa componentes isolados dos componentes filhos que eles renderizam, enquanto mount () vai mais fundo e testa os filhos de um componente.

Para raso (), isso significa que se o componente pai renderizar outro componente que não consegue renderizar, então uma renderização rasa () no pai ainda será aprovada.

Shyam Kumar
fonte