0

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.?

1 Answer 1

1

Find returns nodes, you are testing it against a boolean value (true). If you want to test the existence of Article just do something like

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

Sign up to request clarification or add additional context in comments.

9 Comments

Hey thx for the comment i have actually tried this and it was giving me a error saying have is undefined: ` TypeError: Cannot read property 'have' of undefined 12 | it('Contact renders article component', () => { 13 | console.log(contact.debug()); > 14 | expect(contact.find(Article)).to.have.lengthOf(1); | ^ 15 | }); 16 | }) `
What you get in the console with console.log(contact.debug()); ?
contact.debug: ` <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 am. " /> </div>`
.toHaveLength() is native jest's matcher.
.to.have.length is provided by Chai that you may not use
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.