I have two very simple components that are nested together and I am trying to write a test, i gone through enzyme documentation and used some of the examples but have no luck...
Article component:
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;
Contact component with Article component in it:
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;
My Test:
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);
});
})
Error in console:
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)
I have also read that apparently we should not test the behaviour of the imported component that should be covered in the test of that component which i did. But how do i test if Article component is actually part of Contact component.?