Реактивный фермент, тестирующий вложенный компонент

Question

У меня есть два очень простых компонента, которые вложены вместе, и я пытаюсь написать тест, я просмотрел документацию по ферментам и использовал некоторые примеры, но мне не повезло ...

Состав товара:

import React, { Component } from 'react';
import styled from 'styled-components';

const Styles = styled.div`
    padding-top: 40px;
    padding-bottom: 40px;
    font-family: Montserrat Alternates;
`
class Article extends Component {
    render() {
        const { title, text } = this.props;
        return (
            <Styles>
                <hr />
                <h1>{ title }</h1>
                <p>{ text }</p>
                <hr />
            </Styles>
        )
    }
}
export default Article;

Контактный компонент с компонентом Article в нем:

import React, { Component } from 'react';
import Article from '../../components/article/Article';

class Contact extends Component {
    render () {
        return (
            <div>
                <Article 
                    title='Contact Us'
                    text='Boy favourable day can introduced sentiments entreaties. Noisier carried of in warrant because. So mr plate seems cause chief widen first. Two differed husbands met screened his. Bed was form wife out ask draw. Wholly coming at we no enable. Offending sir delivered questions now new met. Acceptance she interested new boisterous day discretion celebrated. 
                    Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add. She cordially behaviour can attempted estimable. Trees delay fancy noise manor do as an small. Felicity now law securing breeding likewise extended and. Roused either who favour why ham. '
                />
            </div>
        );
    }
}

export default Contact;

Мой тест:

import React from 'react';
import { shallow, configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Contact from './Contact';
import Article from '../../components/article/Article';

configure({ adapter: new Adapter() });

describe('Does Contact Component Render', () => {
    let contact = shallow(<Contact />);

    it('Contact renders article component', () => {
        console.log(contact.debug());
        expect(contact.find(Article)).toBe(true);
    });
})

Ошибка в консоли:

Does Contact Component Render › Contact renders article component

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: {}

      12 |     it('Contact renders article component', () => {
      13 |         console.log(contact.debug());
    > 14 |         expect(contact.find(Article)).toBe(true);
         |                                       ^     });
      })

      at Object.toBe (src/pages/Contact/Contact.test.js:14:39)

Я также читал, что, по-видимому, мы не должны проверять поведение импортированного компонента, которое должно быть включено в тест того компонента, который я сделал. Но как мне проверить, действительно ли компонент Article является частью компонента Contact ??

Answer 1

Find возвращает узлы, вы проверяете его по логическому значению (true).Если вы хотите проверить существование Article, просто сделайте что-то вроде

expect(contact.find(Article)).toHaveLength(1);