我在下面创建了一个包含多个不同字段的表格。表格中还有更多内容,但我只会展示我有问题的部分。
<TabPane tabId="1">
<Form>
<Row>
<Col md="6">
<Label>Name</Label>
</Col>
<Col md="3">
<FormGroup>
<Input
type="text"
name="firstName"
id="firstName"
value={firstName}
className={styleProfile.profileText}
onChange={this.handleUserProfile}
placeholder="First Name"
invalid={!this.state.formValid.firstName}
/>
<FormFeedback>First Name Can't be null</FormFeedback>
</FormGroup>
</Col>
当我尝试为此代码编写单元测试时。出于某种原因,其中一个可以读取并找到表中的名字字段区域,另一个代码给我一个请求失败,状态码为 401 错误。
这是我的 testFile.test.js 文件
describe('Sturecture', () => {
it('should render a first name field', () => {
expect(screen.getByPlaceholderText(/first name/i)).toBeInTheDocument();
});
it('should render the correct first name', () => {
expect(screen.getByPlaceholderText(/first name/i)).toHaveValue(userProfileMock.firstName);
});
这是使用测试运行的结果。纱线测试。
✕ should render a first name field (92ms)
✓ should render the correct first name (73ms)
● user profile page › Sturecture › should render a first name field
Request failed with status code 401
at createError (node_modules/axios/lib/core/createError.js:16:15)
at settle (node_modules/axios/lib/core/settle.js:17:12)
at XMLHttpRequest.handleLoad (node_modules/axios/lib/adapters/xhr.js:61:7)
at XMLHttpRequest.<anonymous> (node_modules/jsdom/lib/jsdom/living/helpers/create-event-accessor.js:32:32)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at XMLHttpRequestImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
at readyStateChange (node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:762:3)
at Request.<anonymous> (node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:888:5)
at IncomingMessage.<anonymous> (node_modules/request/request.js:1076:12)
我想知道我在这里做错了什么...