尝试在 React loader
组件上运行测试时出现以下错误:
TypeError: Cannot read property 'some' of undefined
或
TypeError: error.some is not a function
这是我的组件
import React, {
Component
} from 'react';
import PropTypes from 'prop-types';
import ServiceError from '../ServiceError/ServiceError';
import Spinner from '../Spinner/Spinner';
class Loader extends Component {
static displayName = 'Loader';
static propTypes = {
error: PropTypes.array,
loaded: PropTypes.bool.isRequired,
noData: PropTypes.object,
render: PropTypes.func.isRequired
};
get spinner() {
const {
loaded
} = this.props;
return <Spinner show = {!loaded
}
/>;
}
get component() {
const {
loaded,
noData,
render
} = this.props;
if (!loaded && !this.hasError) {
return this.spinner;
}
if (!loaded && this.hasError) {
return this.serviceError;
}
// Handles API returning no data scenario
if (loaded && !this.hasError && noData) {
return this.serviceError;
}
return render();
}
get hasError() {
const {
error
} = this.props;
return error.some(el => el.show === true);
}
get serviceError() {
const {
noData
} = this.props;
if (this.hasError) {
return <ServiceError / > ;
}
return <ServiceError { ...noData
}
noIcon = {
true
}
/>;
}
render() {
return this.component;
}
}
export default Loader;
这是我编写的测试
import React from 'react';
import renderer from 'react-test-renderer';
import Loader from './Loader';
describe('<Loader />', () => {
const renderDiv = () => < div > Successfully loaded! < /div>;
const props = {
loaded: false,
render: renderDiv
};
it('renders correctly', () => {
const component = renderer.create( < Loader { ...props
}
/>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders content', () => {
const component = renderer.create( < Loader { ...props
}
loaded = {
true
}
/>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders error', () => {
const error = {
show: true,
message: 'Service failed. Please try again'
};
const component = renderer.create( < Loader { ...props
}
error = {
error
}
/>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders multiple children', () => {
const component = renderer.create( <
Loader { ...props
} >
<
p > Loading... < /p> <
p > Please wait < /p> <
/Loader>
);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders serviceError', () => {
const component = renderer.create( <
Loader { ...props
} >
<
p > Loading... < /p> <
p > Please wait < /p> <
/Loader>
);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders serviceError if loaded is true but noData was passed', () => {
const noData = {
description: 'No data'
};
const error = {
show: false
};
const component = renderer.create( <
Loader { ...props
}
loaded = {
true
}
noData = {
noData
}
error = {
error
}
/>
);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
我认为更改断言
会起作用
it('renders error', () => {
const error = [{
show: true,
message: 'Service failed. Please try again'
}];
const component = renderer.create( < Loader { ...props
}
error = {
error
}
/>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
但这没有用。我做错了什么?
最佳答案
在某些测试中,您没有向组件提供 error
属性,这意味着 error
有时可能是未定义
。因此,您无法读取 undefined
的属性 .some
...
你可以这样做来测试它的存在:
get hasError() {
const {
error
} = this.props;
return Array.isArray(error) && error.some(el => el.show === true);
}
否则,您可以只提供默认 Prop :
static defaultProps = {
error: []
}
关于javascript - 如何在我的 React 组件的 Jest 测试中使用数组原型(prototype)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56280686/