无法在反应测试库中使用模拟服务人员答案

【问题标题】：Unable use mock servise worker in react testing library无法在反应测试库中使用模拟服务人员
【发布时间】：2021-08-26 08:56:18
【问题描述】：

我没有模拟 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()
})

【问题讨论】：

标签： reactjs axios react-hooks react-testing-library msw

【解决方案1】：

你不需要为ctx.json()定义data字段，axios.get()方法的解析值有一个data字段。见Response schema

另外，API返回的data是一个数组。

您不需要使用act 辅助函数，通过使用async utilities 之一（如waitFor 或find* 查询）在您的测试中等待API 调用操作的结果就足够了。

例如

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

【讨论】：