[英]Jest test is not passing through parameters
這是我的測試組件:
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( testEndpoint )'的參數' testEndpoint '是未定義的。
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;
你只需要在測試中將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);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.