我正在使用 Jest 和 Enzyme 编写组件测试。
测试的组件使用了一个名为 Service 的类的导入静态方法，该类直接分派到商店。
组件本身调用了 中的两个Service类元素componentDidMount，但也调用了组件的其他部分：
@connect(
(state) => ({
feedback: getFeedback(state),
reportsLeft: getReportsLeft(state),
reported: getReports(state),
newRecordsLeft: getNewRecordsLeft(state),
}),
)
class Feedback extends React.Component<IFeedbackProps> {
componentDidMount() {
Service.updateReportsLeft(); //static async
Service.updateNewRecordsLeft(); //static async
}
getCount(elementsLeft?: number): string {
return elementsLeft === 0 ? 'Done' : `${elementsLeft} left`;
}
handleShowNext = (e: Event) => {
e.preventDefault();
Service.goToNextReport(); //static
};
renderShowNext() {
const {reported} = this.props;
const buttonText = 'Go to next';
const {reportsLeft} = this.props;
// @ts-ignore
return reportsLeft > 0 ? <a href="#" onClick={this.handleShowNext}>{buttonText} </a> : null;
}
render() {
const {reportsLeft, newRecordsLeft} = this.props;
return (
<div>
<p>Feedback: {this.getCount(reportsLeft)} {this.renderShowNext()}</p>
<p>New: {this.getCount(newRecordsLeft)} </p>
</div>
);
}
}
export default Feedback;
我试过用一个简单的模拟来模拟四个类方法，后来甚至尝试测试toBe组件上最简单的元素：
function setup() {
//Also tested an approach with the function contents simply loading before the `describe` methods
const
testReportsLeft: number = 447,
testNewRecordsLeft: number = 778,
testFeedback = null,
testReported = null;
const props: IFeedbackProps = {
reportsLeft: testReportsLeft,
feedback: testFeedback,
reported: testReported,
newRecordsLeft: testNewRecordsLeft,
};
jest.mock('Services/service', () => ({
goToNextReport: jest.fn(),
updateReportsLeft: jest.fn(),
updateNewRecordsLeft: jest.fn(),
getCurrentState: jest.fn(),
})
);
const feedback = shallow(<Feedback {...props} />);
return feedback;
}
describe('Feedback', () => {
describe('component view tests', () => {
it('should render a div', () => {
const feedback = setup();
//This test is wrong in this part, I know. But for now its the reaching of this point that causes issues :/
expect(feedback).toBe('div');
})
})
});
但是，在运行测试时，我收到一条错误消息：
TypeError：无法读取未定义的属性“产品”
错误跟踪如下：
...Resources/public/js/admin-react-js/store/reducers.ts
...Resources/public/js/admin-react-js/store/index.ts
...Resources/public/js/admin-react-js/services/service.ts:41:31
...Resources/public/js/admin-react-js/sidebar/feedback.tsx:34:51
...Resources/public/js/admin-react-js/sidebar/_test_/feedback.spec.tsx:27:43)
因此，如您所见，路径直接回到减速器。这是我希望避免的，因此为函数添加了模拟。
我不确定这段代码可能有什么问题，互联网正在慢慢停止对可能出现的问题有任何想法。
在这里的任何帮助将不胜感激。
另外，如果提供的资源不够，请告诉我。
JEST 版本是21.2.1. 不幸的是，由于该软件包与我正在使用的另一个软件包紧密相连，我无法更改它（版本）。