Шуточный тест не проходит через параметры

Это мой тестовый компонент:

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);
    });
});

Я получаю следующую ошибку, поскольку параметр «тестовая конечная точка», заданный для «instance.checkForBegingSlash (тестовая конечная точка)», не определен.

 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('');

Вот фактическая функция, которую я тестирую, в которой параметр URI не определен:

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

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

Есть идеи, почему мой тест не проходит через параметр?

Весь мой компонент CardEndPoint по запросу:

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;

я только что попробовал это на своей стороне, тестовый проход, можете ли вы поделиться своим компонентом CardEndpoint

Hachimi Ahmed Amine 05.06.2019 11:16

Добавил компонент выше ^ в посте.

Krelis 05.06.2019 11:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
3 322
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вам просто нужно передать реквизиты URI в CardEndpoint в вашем тесте

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);
  });
});

Кажется, это исправить, есть идеи, почему? Я делал то же самое с другими компонентами, и мне никогда не приходилось давать такие реквизиты для теста.

Krelis 05.06.2019 11:39

потому что вы вызываете его в методе рендеринга, вы вызываете checkForBeginSlash this.checkForBeginSlash(this.props.URI), если вы прокомментируете это и снова удалите реквизиты URL, это должно работать, я думаю, что рендеринг тоже должен работать, чтобы пройти тест

Hachimi Ahmed Amine 05.06.2019 11:43

Имеет смысл! Большое спасибо.

Krelis 05.06.2019 11:46

Другие вопросы по теме