Блог

Главная - Вопросы по программированию - Сетевая ошибка при использовании API на localhost, с библиотекой тестирования Jest и React

Сетевая ошибка при использовании API на localhost, с библиотекой тестирования Jest и React

#reactjs #unit-testing #axios #jestjs #react-testing-library

#reactjs #модульное тестирование #axios #jestjs #react-testing-library

Вопрос:

Я использую библиотеку тестирования 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';

Похоже, что есть проблема с использованием localhost, поскольку я получаю эту ошибку:

 console.error node_modules/@testing-library/react/dist/act-compat.js:52
    Error: Error: connect ECONNREFUSED 127.0.0.1:80
        at Object.dispatchError (pathnode_modulesjsdomlibjsdomlivingxhr-utils.js:65:19)
        at Request.<anonymous> (pathnode_modulesjsdomlibjsdomlivingxmlhttprequest.js:676:20)
        at Request.emit (events.js:201:15)
        at Request.onRequestError (pathnode_modulesrequestrequest.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>
  );
}

Есть идеи?

Комментарии:

1. Можете ли вы также поделиться своим полным кодом?

2. Вы имеете в виду код компонента? В компоненте я отправляю запрос GET на данный API (localhost: 4000 / endpoint)

3. Я собираюсь проверить, используете ли вы axios в своей реализации. Если вы используете его, почему бы вам jest-mock-axios этого не сделать?

4. Хорошая мысль, спасибо! Я пробовал это также с jest-mock-axios помощью, но все еще получаю ту же ошибку. Кстати, я добавил код компонента в описание.

Ответ №1:

Что касается вашего случая, с ним, похоже, довольно легко справиться. Вам не нужен какой-либо другой пакет, чтобы имитировать вашу конечную точку. Вы можете издеваться axios напрямую через jest .

Вот идея (взгляните на встроенные комментарии, которые вам нужно добавить):

 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);
  });
});