无法读取未定义的属性“then” - Axios 进入 React

Question

我想模拟单击按钮（#reset），按钮具有使用 axios 进行 onClick 获取的功能。我想模拟此数据，但收到错误：“无法读取未定义的属性‘then’”

测试：

import React from "react";
import PersonsList from "./Components/PersonsList/PersonsList";
import * as axios from "axios";
import { shallow } from "enzyme";

const mockData = [
  {
    gender: "female",
  },
];
jest.mock("axios");
describe("axios", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<PersonsList />);
  });
  axios.get.mockResolvedValue({ data: mockData });
  it("reset", () => {
    const resetButton = wrapper.find("#reset");
    resetButton.simulate("click");
  });
});

按钮：

  <button
          className="actions__modify-list"
          onClick={() => {
            getPeople();
          }}
          id="reset"
        >

单击按钮时调用的函数：

  const getPeople = () => {
    const url = "https://randomuser.me/api/?results=10";
    axios(url)
      .then((res) => {
        setPeople(res.data.results);
      })
      .catch(() => {
        setError(true);
      });
  };

Answer 1

您应该模拟 的解析值axios()，而不是 axios.get()方法。

\n

例如

\n

PersonsList.jsx：

\n

import axios from 'axios';\nimport React, { useState } from 'react';\n\nexport function PersonsList() {\n  const [person, setPeople] = useState();\n  const [error, setError] = useState(false);\n\n  const getPeople = () => {\n    const url = 'https://randomuser.me/api/?results=10';\n    axios(url)\n      .then((res) => {\n        setPeople(res.data.results);\n      })\n      .catch(() => {\n        setError(true);\n      });\n  };\n\n  return (\n    <div>\n      <button\n        className="actions__modify-list"\n        onClick={() => {\n          getPeople();\n        }}\n        id="reset"\n      ></button>\n    </div>\n  );\n}\n

\n

PersonsList.test.jsx：

\n

import { PersonsList } from './PersonsList';\nimport axios from 'axios';\nimport React from 'react';\nimport { shallow } from 'enzyme';\n\njest.mock('axios');\n\nconst mockData = [{ gender: 'female' }];\n\ndescribe('68393613', () => {\n  let wrapper;\n  beforeEach(() => {\n    wrapper = shallow(<PersonsList />);\n  });\n  test('should pass', () => {\n    axios.mockResolvedValue({ data: mockData });\n    const resetButton = wrapper.find('#reset');\n    resetButton.simulate('click');\n  });\n});\n

\n

测试结果：

\n

 PASS  examples/68393613/PersonsList.test.jsx (8.311 s)\n  68393613\n    \xe2\x9c\x93 should pass (12 ms)\n\n-----------------|---------|----------|---------|---------|-------------------\nFile             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-----------------|---------|----------|---------|---------|-------------------\nAll files        |   91.67 |      100 |      80 |   91.67 |                   \n PersonsList.jsx |   91.67 |      100 |      80 |   91.67 | 15                \n-----------------|---------|----------|---------|---------|-------------------\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        8.837 s, estimated 11 s\n

\n