This is how my Messenger Component looks like. As you can see there is the main ponent and a list ponent. The main ponent is exported as default. With this everything is working as expected in my application.

/imports/ui/ponents/messenger.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Container, Segment, Loader, Header } from 'semantic-ui-react'

class Messenger extends Component {
  static get propTypes () {
    return {
      data: PropTypes.array,
      articleId: PropTypes.string,
      isLoading: PropTypes.bool
    }
  }

  render () {
    const { data, articleId, isLoading } = this.props

    if (isLoading) { return (<Loader active inverted size='massive' className='animated fadeIn' />) }
    if (articleId) { return (<MessengerList data={data} articleId={articleId} />) }

    return (
      <Container>
        <Segment id='' className='m-b-1'>
          <Header as='h1'>Title</Header>
          <MessengerList data={data} />
        </Segment>
      </Container>
    )
  }
}

class MessengerList extends Component {
  /* ... */
}

export default Messenger

Now I would like to do some unit testing for the main ponent using enzyme. This is how I am doing it, but the last test is failing as MessengerList is not defined. So how should this be done.

import React from 'react'
import { expect } from 'meteor/practicalmeteor:chai'
import { shallow } from 'enzyme'

import { Container, Loader } from 'semantic-ui-react'
import Messenger from '/imports/ui/ponents/messenger.jsx'

describe('<Messenger />', () => {
  const defaultProps = {
    data: [],
    articleId: '',
    isLoading: true
  }

  it('should show <Loader /> while loading data', () => {
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.exists()).to.be.true
    expect(wrapper.find(Loader).length).to.equal(1)
  })
  it('should show <Container /> data has been loaded', () => {
    defaultProps.isLoading = false
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.find(Container).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  })
  it('should show <MessengerList /> if articleID is given', () => {
    defaultProps.articleID = 'dummy'
    defaultProps.isLoading = false
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.find(MessengerList).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  })
})

I do not want to change export default Messenger

This is how my Messenger Component looks like. As you can see there is the main ponent and a list ponent. The main ponent is exported as default. With this everything is working as expected in my application.

/imports/ui/ponents/messenger.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Container, Segment, Loader, Header } from 'semantic-ui-react'

class Messenger extends Component {
  static get propTypes () {
    return {
      data: PropTypes.array,
      articleId: PropTypes.string,
      isLoading: PropTypes.bool
    }
  }

  render () {
    const { data, articleId, isLoading } = this.props

    if (isLoading) { return (<Loader active inverted size='massive' className='animated fadeIn' />) }
    if (articleId) { return (<MessengerList data={data} articleId={articleId} />) }

    return (
      <Container>
        <Segment id='' className='m-b-1'>
          <Header as='h1'>Title</Header>
          <MessengerList data={data} />
        </Segment>
      </Container>
    )
  }
}

class MessengerList extends Component {
  /* ... */
}

export default Messenger

Now I would like to do some unit testing for the main ponent using enzyme. This is how I am doing it, but the last test is failing as MessengerList is not defined. So how should this be done.

import React from 'react'
import { expect } from 'meteor/practicalmeteor:chai'
import { shallow } from 'enzyme'

import { Container, Loader } from 'semantic-ui-react'
import Messenger from '/imports/ui/ponents/messenger.jsx'

describe('<Messenger />', () => {
  const defaultProps = {
    data: [],
    articleId: '',
    isLoading: true
  }

  it('should show <Loader /> while loading data', () => {
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.exists()).to.be.true
    expect(wrapper.find(Loader).length).to.equal(1)
  })
  it('should show <Container /> data has been loaded', () => {
    defaultProps.isLoading = false
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.find(Container).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  })
  it('should show <MessengerList /> if articleID is given', () => {
    defaultProps.articleID = 'dummy'
    defaultProps.isLoading = false
    const wrapper = shallow(<Messenger {...defaultProps} />);
    expect(wrapper.find(MessengerList).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  })
})

I do not want to change export default Messenger

• javascript
• reactjs
• unit-testing
• enzyme

Share Improve this question Follow edited Aug 9, 2017 at 19:38 user3142695 asked Aug 9, 2017 at 18:45 user3142695user3142695 17.4k5555 gold badges199199 silver badges375375 bronze badges 6

• You have to import the MessengerList ponent in the test. import MessengerList from '../ponents/MessengerList.jsx; Then expect(wrapper.find(MessengerList).length).to.equal(1); – dcodesmith Commented Aug 9, 2017 at 19:21
• I can't import it, as it is not exported in the jsx file. Only the main ponent is exported (as default) – user3142695 Commented Aug 9, 2017 at 19:28
• You have both ponents in the same file? – dcodesmith Commented Aug 9, 2017 at 19:30
• Yes, both ponents are in the same file. Exactly as posted. – user3142695 Commented Aug 9, 2017 at 19:31
• Are you testing <Communicator/> or <Messenger />? coz in the test file you're shallow rendering <Communicator />. – dcodesmith Commented Aug 9, 2017 at 19:37

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

Export your MessengerList class ....

export class MessengerList extends Component {
  /* ... */
}

And then in the test do ....

import React from 'react'
import { expect } from 'meteor/practicalmeteor:chai'
import { shallow } from 'enzyme'

import { Container, Loader } from 'semantic-ui-react'
import Messenger, { MessengerList } from '/imports/ui/ponents/messenger.jsx';

describe('<Messenger />', () => {
  let wrapper;
  const defaultProps = {
    data: [],
    articleId: '',
    isLoading: true
  }

  beforeEach(() => {
    // render the ponent once up here in this block. It runs before each test.
    wrapper = shallow(<Messenger {...defaultProps} />);
  });

  it('should show <Loader /> while loading data', () => {
    expect(wrapper.exists()).to.be.true
    expect(wrapper.find(Loader).length).to.equal(1)
  });

  it('should show <Container /> data has been loaded', () => {
    defaultProps.isLoading = false

    expect(wrapper.find(Container).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  });

  it('should show <MessengerList /> if articleID is given', () => {
    defaultProps.articleID = 'dummy'
    defaultProps.isLoading = false

    expect(wrapper.find(MessengerList).length).to.equal(1);
    expect(wrapper.find(Loader).exists()).to.be.false
  });
});

UPDATE

Ideally, you should state that a prop is being modified first ...

...
describe('and the data has loaded', () => {
  beforeEach(() => {
    defaultProps.isLoading = false;
  });

  it('should show <Container /> ponent', () => {
    expect(wrapper.find(Container).length).to.equal(1)
    expect(wrapper.find(Loader).exists()).to.be.false
  });
});
...