jeudi 19 janvier 2017

enzyme react testing .contains() not matching

Hi there I am using Enzyme to test my react components. I was wondering what's the best way to test the fact that the component I am testing DOES include a certain child component with a certain props?

So far I have no success in doing this:

// LineItemRow.js
import React, { PropTypes } from 'react';
import InlineEdit from './InlineEdit';

const LineItemRow = ({
  project,
}) => (
  <div>
    <InlineEdit 
      value={project.name} />
  </div>
)
LineItemRow.propTypes = {
  project: PropTypes.object,
};

export default LineItemRow;

// LineItemRow.spec.js
describe('<LineItemRow /> component', function () {
  const setup = () => {
    const props = {
      project: {id: 1, name: '1000'},
    }
    const output = shallow(<LineItemRow {...props} />)
    return {
      output,
      props,
    }
  }

  it.only('should contain project name', function () {
    const { output, props } = setup()
    const actual  = output.contains(<InlineEdit value={props.project.name} />) // THIS IS FALSE
    const expected= true

    expect(actual).toEqual(expected)
  });

});

The line I marked "this is false" is where I have most question about. how can I test that the child component InlineEdit will be given props XYZ?

Thank you!

Aucun commentaire:

Enregistrer un commentaire