Это мой тестовый компонент:
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>
{this.organizeParams(this.props.filteredQueryParams)}
</Col>
</Row>
<Row>
<Col>
<b>
Path params:
</b>
{this.organizeParams(this.props.filteredPathParams)}
</Col>
</Row>
</Container>
</ListGroup.Item>
</React.Fragment>
);
};
}
export default CardEndpoint;
Добавил компонент выше ^ в посте.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


вам просто нужно передать реквизиты 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);
});
});
Кажется, это исправить, есть идеи, почему? Я делал то же самое с другими компонентами, и мне никогда не приходилось давать такие реквизиты для теста.
потому что вы вызываете его в методе рендеринга, вы вызываете checkForBeginSlash this.checkForBeginSlash(this.props.URI), если вы прокомментируете это и снова удалите реквизиты URL, это должно работать, я думаю, что рендеринг тоже должен работать, чтобы пройти тест
Имеет смысл! Большое спасибо.
я только что попробовал это на своей стороне, тестовый проход, можете ли вы поделиться своим компонентом CardEndpoint