【发布时间】：2021-09-14 20:59:47
【问题描述】：
我有一个组件，它获取表单数据并用数据发送一个动作。此操作最终向服务器发出 ajax 请求，以使用 javascript fetch 函数发送该数据。
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { getCookie } from '../../../utils/cookies';
import { postJobAction } from './redux/postJobActions';
const PostJobComponent = () => {
const dispatch = useDispatch();
const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
const [department, setDepartment] = useState('');
const postJob = (event) => { // Here is happens and I am testing this function now.
event.preventDefault();
const jobPosterId = getCookie('id');
const title = event.target.title.value;
const location = event.target.location.value;
const jobDescription = editorState.getCurrentContent().getPlainText();
dispatch(postJobAction({
jobPosterId,
title,
location,
department,
jobDescription,
}));
};
const onDepartmentChange = (event) => {
setDepartment(event.target.value);
};
return (
<div className='post-job'>
<form onSubmit={postJob}>
<div>
<label>Job Title</label>
<input
type='text'
name='title'
defaultValue=''
className='job__title'
placeholder='e.g. Frontend Developer, Project Manager etc.'
required
/>
</div>
<div>
<label>Job Location</label>
<input
type='text'
name='location'
defaultValue=''
className='job__location'
placeholder='e.g. Berlin, Germany.'
required
/>
</div>
<div>
<label>Department</label>
<select className='job__department' required onChange={onDepartmentChange}>
<option value=''>Select</option>
<option value='Customer Success'>Customer Success</option>
<option value='Professional Services'>Professional Services</option>
<option value='Service Support'>Service And Support</option>
</select>
</div>
<div style={{ border: '1px solid black', padding: '2px', minHeight: '400px' }}>
<Editor
required
editorState={editorState}
onEditorStateChange={setEditorState}
/>
</div>
<div>
<button>Save</button>
</div>
</form>
</div>
);
};
export default PostJobComponent;
这里是postJob功能的玩笑和酶测试。
it('should submit job post form on save button click', () => {
const onPostJobSubmit = jest.fn();
const instance = wrapper.instance();
wrapper.find('form').simulate('submit', {
target: {
jobPosterId: {
value: '12312jkh3kj12h3k12h321g3',
},
title: {
value: 'some value',
},
location: {
value: 'some value',
},
department: {
value: 'Customer',
},
jobDescription: {
value: 'This is Job description.',
},
},
});
expect(onPostJobSubmit).toHaveBeenCalled();
});
代码运行良好，但测试失败并出现以下错误。
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
98 | },
99 | });
> 100 | expect(onPostJobSubmit).toHaveBeenCalled();
| ^
101 | });
102 | });
103 |
at Object.<anonymous> (src/components/employer/jobs/postJob.test.js:100:27)
这里是 postJob 函数的动作，它调度动作。
export const postJobAction = (payload) => {
return {
type: 'POST_JOB_REQUEST',
payload,
}
};
这是传奇。
import { put, call } from 'redux-saga/effects';
import { postJobService } from '../services/postJobServices';
export function* postJobSaga(payload) {
try {
const response = yield call(postJobService, payload);
yield [
put({ type: 'POST_JOB_SUCCESS', response })
];
} catch(error) {
yield put({ type: 'POST_JOB_ERROR', error });
}
}
这里是服务。
import { getCookie } from '../../../../utils/cookies';
export const postJobService = (request) => {
return fetch('http://localhost:3000/api/v1/employer/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': getCookie('token'),
},
body: JSON.stringify(request.payload)
})
.then(response => {
return response.json();
})
.then(json => {
return json;
})
.catch(error => {
return error;
});
};
知道如何解决这个问题吗？我是测试新手。
【问题讨论】：
标签： javascript reactjs jestjs enzyme redux-saga