无法在反应测试库中使用模拟服务工作者

问题描述

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

解决方法

您不需要为 10 silly lifecycle mobile-tiku@0.0.1~start: Args: [ '-c','umi dev' ] 11 silly lifecycle mobile-tiku@0.0.1~start: Returned: code: 1 signal: null 12 info lifecycle mobile-tiku@0.0.1~start: Failed to exec start script 13 verbose stack Error: mobile-tiku@0.0.1 start: `umi dev` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/Users/lixiaokai/.nvm/versions/node/v12.22.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:314:20) 13 verbose stack at ChildProcess.<anonymous> (/Users/lixiaokai/.nvm/versions/node/v12.22.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:314:20) 13 verbose stack at maybeClose (internal/child_process.js:1022:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5) 定义 data 字段，ctx.json() 方法的解析值具有 axios.get() 字段。

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

您不需要使用 data 辅助函数，在您的测试中使用 async utilities 之一（如 act 或 { {1}} 个查询就足够了。

例如

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