请求失败，状态码 401 - 反应单元测试答案

【问题标题】：Request failed with status code 401 - React Unit-Testing请求失败，状态码 401 - 反应单元测试
【发布时间】：2021-01-30 01:05:01
【问题描述】：

我在下面创建了一个包含多个不同字段的表格。表格中的内容更多，但我只会显示我有问题的部分。

 <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>

当我尝试为此代码编写单元测试时。出于某种原因，其中一个可以读取并找到表内的名字字段区域，另一个代码给我一个 Request failed with status code 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)

我想知道我在这里做错了什么......

【问题讨论】：

标签： reactjs unit-testing jestjs

【解决方案1】：

嗯，我遇到了完全相同的问题。我还不知道原因，但我能够通过模拟 axios 来解决我的问题。

在您的错误消息中，存在与 axios 相关的错误，因此我想您可以通过以下方式模拟 axios 来解决此问题：

import axios from "yourAxiosPath"

jest.mock("yourAxiosPath")

在您的测试中，在渲染之前，您应该执行以下操作：

axios.mockImplementation(() => Promise.resolve({data: {}}))

【讨论】：