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

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?

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!

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.