Jest test is not passing through parameters

Question

This is my test component:

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import {configure, shallow} from "enzyme";
import CardEndpoint from "../../../components/cards/CardEndpoint";

configure({adapter: new Adapter()});

describe("<CardEndPoint />", () => {
    let wrapper;

    beforeAll(() => {
        wrapper = shallow(<CardEndpoint />);
    });

    it("should add slash in front of an 'slash-less' endpoint", () => {
        let instance = wrapper.instance();
        let expectedEndpoint = '/house/:houseNumber';
        let testEndpoint = 'house/:houseNumber';
        let slashCheck = instance.checkForBeginSlash(testEndpoint);
        expect(slashCheck).toEqual(expectedEndpoint);
    });
});

Im getting the following error as the parameter ' testEndpoint ' given to 'instance.checkForBegingSlash( testEndpoint )' is undefined.

 TypeError: Cannot read property 'startsWith' of undefined

  11 |         const position = 0;
  12 | 
> 13 |         if (URI.startsWith(slash)) {
     |                     ^
  14 |             return URI
  15 |         } else {
  16 |             return [URI.slice(0, position), slash, URI.slice(position)].join('');

Here's the actual function I'm testing, in which the parameter URI is undefined:

checkForBeginSlash = (URI) => {
    const slash = '/';
    const position = 0;

    if (URI.startsWith(slash)) {
        return URI
    } else {
        return [URI.slice(0, position), slash, URI.slice(position)].join('');
    }
};

Any ideas why my test is not passing through the parameter?

My entire CardEndPoint component as requested:

import React from 'react';
import ListGroup from 'react-bootstrap/ListGroup'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

class CardEndpoint extends React.Component {

checkForBeginSlash = (URI) => {
    const slash = '/';
    const position = 0;

    if (URI.startsWith(slash)) {
        return URI
    } else {
        return [URI.slice(0, position), slash, URI.slice(position)].join('');
    }
};

organizeParams = (params) => {
    if (params) {
        return Object.values(params).join(', ')
    } else {
        return 'No parameters detected.'
    }
};

render = () => {
    return (<React.Fragment>
            <ListGroup.Item className={`card--${this.props.method} no-padding`}>
                <Container variant="fluid">
                    <Row>
                        <Col
                            className={`card__method--${this.props.method} d-flex justify-content-center align-items-center`}
                            lg="2" data-testid="createdCardMethod">
                            {this.props.method}
                        </Col>
                        <Col className="card__endpoint__url" lg="10" data-testid="createdCardURL">
                            {this.checkForBeginSlash(this.props.URI)}
                        </Col>
                    </Row>
                </Container>
            </ListGroup.Item>
            <ListGroup.Item className={`card--${this.props.method} no-padding`}>
                <Container variant="fluid">
                    <Row>
                        <Col>
                            <b>
                                Query params:
                            </b>
                            &nbsp; {this.organizeParams(this.props.filteredQueryParams)}
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <b>
                                Path params:
                            </b>
                            &nbsp; {this.organizeParams(this.props.filteredPathParams)}
                        </Col>
                    </Row>
                </Container>
            </ListGroup.Item>
        </React.Fragment>
    );
};
}

export default CardEndpoint;

Answer 1

you just need to pass the URI props to CardEndpoint in your test

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import CardEndpoint from './CardEndpoint';

configure({ adapter: new Adapter() });

describe('<CardEndPoint />', () => {
  let wrapper;

  beforeAll(() => {
    wrapper = shallow(<CardEndpoint URI="" />);
  });

  it("should add slash in front of an 'slash-less' endpoint", () => {
    let instance = wrapper.instance();
    let expectedEndpoint = '/house/:houseNumber';
    let testEndpoint = 'house/:houseNumber';
    let slashCheck = instance.checkForBeginSlash(testEndpoint);
    expect(slashCheck).toEqual(expectedEndpoint);
  });
});