使用 Jest 和 React 测试库在本地主机上使用 API 时出现网络错误

Question

我正在使用 React 测试库和 Jest，并尝试向我的后端模拟 GET 请求，该请求也在我的本地主机（不同端口）上运行。

import * as React from "react";
import { render } from "@testing-library/react";
import FetchMock from "jest-fetch-mock";
import MyComponent from "../MyComponent";

describe("MyComponent", () => {

  beforeEach(() => {
    FetchMock.resetMocks();
  });

  it("renders correct data", async () => {
    const mockData = { data: "foo" };
    FetchMock.once(JSON.stringify(mockData))

    const { findAllByText } = render(
      <MyComponent url={'localhost:4000'} />
    );

    const text= await findAllByText(/foo/);
    expect(text).toHaveLength(1);
  });
});

在我的测试配置中，我也添加了这一行：

axios.defaults.baseURL = 'http://localhost:4000';

使用本地主机似乎有问题，因为我收到此错误：

console.error node_modules/@testing-library/react/dist/act-compat.js:52
    Error: Error: connect ECONNREFUSED 127.0.0.1:80
        at Object.dispatchError (path\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:65:19)
        at Request.<anonymous> (path\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:676:20)
        at Request.emit (events.js:201:15)
        at Request.onRequestError (path\node_modules\request\request.js:877:8)
        at ClientRequest.emit (events.js:196:13)
        at Socket.socketErrorListener (_http_client.js:402:9)
        at Socket.emit (events.js:196:13)
        at emitErrorNT (internal/streams/destroy.js:91:8)
        at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
        at processTicksAndRejections (internal/process/task_queues.js:83:17) undefined

这是我的组件 (MyComponent.js):

import React from 'react';
import axios from 'axios';

export default function MyComponent(url) {
  const [data, setData] = React.useState('');
  
  React.useEffect(() => {
    const getData = async () => {
      axios.get(`${url}/foo`)
        .then(res => {
          setData(res.data)
        })
    };
    getData();
  }, []);

  return (
    <h1>{data}</h1>
  );
}

有什么想法吗？

Answer 1

关于你的情况，看起来很容易处理。您不需要任何其他包来模拟您的端点。您可以直接通过 jest.

模拟 axios

思路是这样的（看看需要添加的行内注释）：

import * as React from "react";
import { render } from "@testing-library/react";
import axios from "axios";
import MyComponent from "../MyComponent";

// Mock axios directly
jest.mock('axios')

describe("MyComponent", () => {

  it("renders correct data", async () => {
    const mockData = { data: "foo" };
    
    // Mock returning your value
    axios.get.mockResolvedValue(mockData);

    const { findAllByText } = render(
      <MyComponent url={'localhost:4000'} />
    );

    const text= await findAllByText(/foo/);
    expect(text).toHaveLength(1);
  });
});

使用 Jest 和 React 测试库在本地主机上使用 API 时出现网络错误

Network error while using API on localhost, with Jest & React Testing Library

unit-testing

reactjs

jestjs

axios

react-testing-library