CODEWITHSUNDEEP
reactjsunit-testingtestingjestjsenzyme
Minh Kha
Minh Kha

Reputation: 1112

How to write a test case to check whether a function return exact component or not

I write a SelectList component, specify a 'render' prop as a function which returns a component. I want to test it but dont know the best way to test with function.

import renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import TestSelectList from './SelectList';

const SelectList = ({ inputVariant, input, inputProps, render, meta, children, ...restProps }) => {
  return (
    <Select input={inputVariant} {...input} {...inputProps} {...restProps}>
      {(render && render()) || children}
    </Select>
  );
};

So my test case I wrote:

 it('Render correctly render prop', () => {
    const component = mount(<SelectList render={() => <p>Kha</p>} />);
    // console.log(renderer.create(component.props().render()).toJSON());
    expect(renderer.create(component.props().render()).toJSON()).toMatchObject(renderer.create(<p>Kha</p>).toJSON());
  });

It passed. But I dont think that it's good. My expectation is if the function in render prop return <p>Sometext<p>, in the test case how can I handle to know that.

Upvotes: 0

Views: 765

Answers (1)

Mark Shulhin
Mark Shulhin

Reputation: 119

You can use .contains method to match a rendered output of the component:

it('Render correctly render prop', () => {
    const component = mount(<SelectList render={() => <p>Kha</p>} />);
    expect(component.contains(<p>Kha</p>)).toBe(true);
  });

Upvotes: 1

Related Questions