Предотвращение мелкого рендеринга фермента на частном компоненте

Question

Как предотвратить мелкий рендеринг на частном компоненте с ферментом?

Вот компонент пример:

// foo.jsx 
import React from 'react'; 

// Private component 
const FooSubtitle = ({subtitle}) => { 
    if (!subtitle) return null; 

    return <div className="foo__subtitle">{subtitle}</div>; 
}; 

// Public component 
const Foo = ({title, subtitle}) => (
    <div className="foo"> 
    <div className="foo__title">{title}</div> 
    <FooSubtitle subtitle={subtitle} /> 
    </div> 
); 

export default Foo; 

Вот моя спецификация:

// foo.spec.js 
import React from 'react'; 
import {shallow} from 'enzyme'; 
import Foo from './foo.jsx'; 

describe('Foo',() => { 

    it('should render a subtitle',() => { 
    const wrapper = shallow(<Foo title="my title" subtitle="my subtitle" />); 

    // This test doesn't work, so I cannot test the render of my component 
    expect(wrapper.find('.foo__subtitle').length).toBe(1); 

    // This one works, but it is not relevant 
    expect(wrapper.find('FooSubtitle').length).toBe(1); 
    }); 
}); 

Любая идея? Большое спасибо.

Answer 1

Если у вас есть личные компоненты, и вы хотите, чтобы проверить их выполнение, вы должны:

1. имеет, по меньшей мере, фермент v2.5
2. Посмотрите на Enzyme .dive() API: Мелкий делает не-DOM ребенок текущей оболочки

Вот рабочий пример:

// foo.jsx 
import React from 'react'; 

// Private component 
const FooSubtitle = ({subtitle}) => { 
    if (!subtitle) return null; 

    return <div className="foo__subtitle">{subtitle}</div>; 
}; 

// Public component 
const Foo = ({title, subtitle}) => (
    <div className="foo"> 
    <div className="foo__title">{title}</div> 
    <FooSubtitle subtitle={subtitle} /> 
    </div> 
); 

export default Foo; 

---

// foo.spec.js 
import React from 'react'; 
import {shallow} from 'enzyme'; 
import Foo from './foo.jsx'; 

describe('Foo',() => { 

    it('should render a subtitle',() => { 
    const wrapper = shallow(<Foo title="my title" subtitle="my subtitle" />); 

    // This test works, but it is not relevant 
    expect(wrapper.find('FooSubtitle').length).toBe(1); 

    // This one need the `dive()` API to work 
    expect(wrapper.find('FooSubtitle').dive().find('.foo__subtitle').length).toBe(1); 
    }); 
}); 

Answer 2

Shallow рендеринг полезно ограничить себя тестирование компонента как единое целое, и убедиться, что ваши тесты не косвенно утверждения на поведение дочерних компонентов.

Я думаю, вы пытаетесь сделать то, что мелкие стараются избегать ^^.

Вы можете протестировать устройство частный компонент непосредственно или использовать визуализации:

expect(wrapper.find(Foo).render().find('.foo__subtitle')).to.have.length(1); 

, как здесь объяснены: https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/render.md

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

Answer 3

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

<div className="foo"> 
    <div className="foo__title">{title}</div> 
    {FooSubtitle({subtitle})} 
</div> 

В противном случае, я не уверен, что это хорошая идея, чтобы иметь сложные частные компоненты ...

Answer 4

Вы должны экспортировать частный компонент,

export const FooSubtitle = ... 

Теперь вы можете проверить его на части со всеми его вариантами проп ,

Затем вы можете проверить наличие FooSubtitle с определенными реквизитами в рендеринге компонента Foo как обычно и ничего больше.