我必须做什么才能使用 Mock Service Worker 进行 Jest 测试才能使 React hook 正常工作？

Question

我想使用开玩笑和模拟服务工作者用fetch呼叫测试react钩子 测试看起来像：

import React from 'react'
import App from './App' 
import {render,screen} from '@testing-library/react'
import { rest } from 'msw'
import { setupServer } from 'msw/node'



it('should display hello world',  () => {
    
     const url = process.env.REACT_APP_BACKEND_URL  +"/helloworld" 
     console.log(url)

     const server = setupServer(
                                 rest.get(url,  (req, res, ctx) =>  {
                                                                       
                                                                       return res(
                                                                                     ctx.status(200),
                                                                                     ctx.json({message:"Hello World"})   
                                                                                  )         
                                                                     }
                          )
                    )

     server.listen()
     console.log("server listen")
     render(<App />);
     const linkElement =  screen.findByText('Hello World')
     expect(linkElement).toBeInTheDocument()

     server.close()
 })

我测试的代码看起来像这样的

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

function App () {
    
    const [message, setMessage] = useState('')
    
    useEffect(() => {
            const   getMessage = async () => {
                const url = process.env.REACT_APP_BACKEND_URL  +"/helloworld" 
                console.log(url)
               
                      const response = await fetch(url)
                      console.log(response.status)
                      const text = await response.json()
                      console.log(text.message)
                      
                      setMessage(text.message)

                    
            }
            getMessage()
            .catch(console.error)
     }, [])

    return ( <div>{message}</div>)
 }

export default  App ;

执行此测试时，

测试结果如下： console.log http：// localhost：5000/helloworld

  at Object.<anonymous> (src/App.test.jsx:12:14)

console.log 服务器收听

  at Object.<anonymous> (src/App.test.jsx:26:14)

控制台 http：// localhost：5000/helloworld

  at getMessage (src/App.jsx:11:25)

失败src/app.test.jsx ✕应该显示Hello World（154 ms）

●应显示Hello World

expect(received).toBeInTheDocument()

received value must be an HTMLElement or an SVGElement.
Received has type:  object
Received has value: {}

  27 |      render(<App />);
  28 |      const linkElement =  screen.findByText('Hello World')
> 29 |      expect(linkElement).toBeInTheDocument()
     |                          ^
  30 |
  31 |      server.close()
  32 |  })

  at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:386:30)
  at Object.toBeInTheDocument (node_modules/expect/build/index.js:387:15)
  at Object.<anonymous> (src/App.test.jsx:29:26)

---------------------------------------------------------------------- ----- | ------------------------------------------------------- 文件| ％stmts | ％分支| ％funcs | ％线|未发现的行＃ ---------- | ------------ | ------------------------------------------------------------- - | ------------------------------- 所有文件| 0 | 0 | 0 | 0 |
---------- | ------------ | ------------------------------------------------------------- - | ------------------------------- 测试套件：1个失败，总共1个 测试：1个失败，总共1个 快照：总计0 时间：3.061 s 运行所有测试套件。

观看用法：按W显示更多。

我该怎么做才能成功执行此测试？

Answer 1

在测试中添加异步：async() => { 并在 screen.findByText 之前等待：等待 screen.findByText('Hello World') 并且错误已

修复

mport React from 'react'
import App from './App' 
import {render,screen} from '@testing-library/react'
import { rest } from 'msw'
import { setupServer } from 'msw/node'



it('should display hello world',  async () => {
    
     const url = process.env.REACT_APP_BACKEND_URL + "/helloworld"  // eslint-disable-line
     console.log(url)

     const server = setupServer(
                                 rest.get(url,  (req, res, ctx) =>  {
                                                                       
                                                                       return res(
                                                                                     ctx.status(200),
                                                                                     ctx.json({message:"Hello World"})   
                                                                                  )         
                                                                     }
                          )
                    )

     server.listen()
     console.log("server listen")
     render(<App />);
     const linkElement = await screen.findByText('Hello World')
     expect(linkElement).toBeInTheDocument()

     server.close()
 })