CODEWITHSUNDEEP
reactjskarma-jasmineenzyme
Christopher Stephenson
Christopher Stephenson

Reputation: 502

Simple jasmine tests using enzyme is failing.

I am writing a simple test for a react component using enzyme to create a shallow clone which is failing when it shouldn't be. The two things I am trying to see, is if it rendered alright, and if it got a prop. Both of these are failing. Here the component I am testing and my spec:

My component:

import * as React from 'react';

export default class PortfolioItem extends React.Component<any, any> {
  render() {
    // Deconstructing the items obj into these consts
    const {
      ID,
      abbreviation,
      active,
      managementCompany,
      name,
      targetOperatingReserve
    } = this.props.item;
    return (
      <tr className='.item'>
        <td className='id' >{ID}</td>
        <td className='abv' >{abbreviation}</td>
        <td className='active' >{active}</td>
        <td className='manComp' >{managementCompany}</td>
        <td className='name' >{name}</td>
        <td className='tor' >{targetOperatingReserve}</td>
      </tr>
    );
  }
}

My Spec:

import * as React from 'react';
import { shallow } from 'enzyme';
import PortfolioItem from '../../src/js/components/PortfolioItem';

const createShallowPortfolioItem = () => {
  const props = {
    item: {
      ID: 1234567,
      abbreviation: 'rit',
      active: true,
      managementCompany: false,
      name: 'Jorge Joestar',
      targetOperatingReserve: 0.0
    }
  };
  return shallow(<PortfolioItem {...props} />);
};

describe('PortfolioItem', () => {
  it('it contains the class name item', () => {
    const portItem = createShallowPortfolioItem();
    expect(portItem.is('.item')).toBeTruthy();
  });

  it('renders the item name', () => {
    const item = createShallowPortfolioItem();
    expect(item.find('.name').text()).toEqual('Jorge Joestar');
  });
});

Upvotes: 0

Views: 135

Answers (1)

Nad&#232;ge
Nad&#232;ge

Reputation: 931

"item" class is on the tr, your component first children not on the component itself. When rendering PortfolioItem you would first have a div and inside that div the children you defined in the render. That explains why the first test fail. The second test fails because shallow does not create the whole component, there is no children so no element with class ".name".

So you can either use mount to have a full render of the component` with children. Or test something else like

expect(portItem).toEqual(jasmine.anything())

Not very fancy but if an error prevent you component from being rendered the test will fail.

Upvotes: 1

Related Questions