Shallow Rendering Jest Snapshots

Question

Я только начинаю с тестирования Jest и Snapshot, и мне было интересно, почему все примеры делают «глубокий рендеринг» компонентов React для создания моментальных снимков.

Пример

const A =() => { 
    return <div><B /><B /></div> 
} 
const B =() => { 
    return <div>This is B</div> 
} 

// TEST 
describe('Test',() => { 

    it('renders correctly',() => { 
     const tree = ReactTestRenderer.create(
     <A /> 
    ).toJSON(); 

     expect(tree).toMatchSnapshot(); 
    }); 
}); 

Snapshot:

exports[`Summary DOM rendering renders correctly 1`] = ` 
<div> 
    <div> 
    This is B 
    </div> 
    <div> 
    This is B 
    </div> 
</div> 
`; 

Хотя это полезно иногда я думаю, что это делает гораздо больше смысла, чтобы иметь отдельные тесты/снимки для A и B и сделать неглубокий рендеринга, так что если Я меняю B мои снимки A, не нужно обновлять. Поэтому я хочу, чтобы мои снимки выглядели следующим образом:

exports[`Summary DOM rendering renders correctly 1`] = ` 
<div> 
    <B /> 
    <B /> 
</div> 
`; 

Есть ли способ сделать это? Это хорошая идея в первую очередь? Если возможно, почему мелкий рендеринг не является предпочтительным способом в документах?

Answer 1

Update (3 января 2018)

Shallowrender был перемещен в react-test-renderer

import ShallowRenderer from 'react-test-renderer/shallow' 

it('Matches snapshot',() => { 
    const renderer = new ShallowRenderer() 
    const result = renderer.render(<A />) 
    expect(result).toMatchSnapshot() 
}) 

---

Вы можете использовать react-test-utils Shallow Rendering с тестированием снимков, а также:

import ReactTestUtils from 'react-addons-test-utils'; 

describe('Test',() => { 

    it('renders correctly',() => { 
     const renderer = ReactTestUtils.createRenderer(); 
     expect(renderer.render(<A />)).toMatchSnapshot(); 
    }); 
}); 

С этим вы можете создать визуализатор, который отображает только 1 уровень, at is: он будет отображать только то, что находится в функции вашего компонента render(), а не отображать дочерние компоненты.

react-test-renderer - это другой рендер, который превращает ваш компонент (и все дерево) в JSON. В настоящее время у него нет возможности для мелкого рендеринга, он будет работать точно так же, как в браузере, и отображать все, но JSON.

Оба они хороши для тестирования, потому что они не требуют среды DOM и имеют разные характеристики. Вы можете выбрать тот, который лучше подходит для вашего случая использования.

Answer 2

Вы можете использовать enzyme для мелкой обработки ваших компонентов.

Я не могу сказать вам точно, почему это не предпочтительный метод в документах, но я предполагаю, что это связано с тем, что функциональность не встроена в официальный react-test-renderer.