Невозможно протестировать компонент с помощью MSW в библиотеке тестирования реакции

Вместо того, чтобы издеваться над запросом axios, я пытаюсь протестировать компонент с помощью msw, но после запроса я не получаю видимость содержимого в компоненте, что я делаю не так?

Мой компонент

      import React, {useEffect, useState} from 'react'
import axios from "axios";


export default function TestPage() {

  const [testData, setTestData] = useState('')

  useEffect(() => {
    const getSomeData = async () => {
      const data = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
      setTestData(data.data.title)
    }
    getSomeData()
  }, [])

  return (
      <div className='test'>
        <h1>{testData}</h1>
      </div>
  )
}

Мой тестовый файл

      import React from 'react'
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import {render, act, screen} from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import TestPage from "../testPage";


const allUsers = [
  {title:'User'}
]

const server = setupServer(
    rest.get('https://jsonplaceholder.typicode.com/todos/1', async (req, res, ctx) => {
      return res(ctx.json( {data: allUsers} ));
    })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers())
afterAll(() => server.close());

test('loads and displays greeting', async () => {
  await act(async () => {
    await render(<TestPage/>)
  })
  await screen.findByText('User') //I have no response content here
  screen.debug()
})
Источник

1 ответ

Вам не нужно определять поле для ctx.json(), разрешенное значение axios.get() метод имеет поле.

В дополнение data API возвращает массив.

Вам не нужно использовать actвспомогательная функция, дождитесь результата операции вызова API в вашем тесте, используя одну из асинхронных утилит, например waitFor или find* запроса достаточно.

Например

TestPage.tsx:

      import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function TestPage() {
  const [testData, setTestData] = useState('');

  useEffect(() => {
    const getSomeData = async () => {
      const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
      console.log(res.data);
      setTestData(res.data[0]?.title);
    };
    getSomeData();
  }, []);

  return (
    <div className="test">
      <h1>{testData}</h1>
    </div>
  );
}

TestPage.test.tsx:

      import React from 'react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import TestPage from './TestPage';

const allUsers = [{ title: 'User' }];

const server = setupServer(
  rest.get('https://jsonplaceholder.typicode.com/todos/1', async (req, res, ctx) => {
    return res(ctx.json(allUsers));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('67902700', () => {
  test('loads and displays greeting', async () => {
    render(<TestPage />);
    await screen.findByText('User');
    screen.debug();
  });
});

результат испытаний:

       PASS  examples/67902700/TestPage.test.tsx (7.499 s)
  67902700
    ✓ loads and displays greeting (65 ms)

  console.log
    [ { title: 'User' } ]

      at examples/67902700/TestPage.tsx:10:15

  console.log
    <body>
      <div>
        <div
          class="test"
        >
          <h1>
            User
          </h1>
        </div>
      </div>
    </body>

      at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:82:13)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.978 s
Источник
Другие вопросы по тегам