@testing-library/与 msw/node 反应； window.fetch 未在 POST 上返回正文

Posted 2023-02-21

【中文标题】@testing-library/与 msw/node 反应； window.fetch 未在 POST 上返回正文

【英文标题】：@testing-library/react with msw/node; window.fetch not returning body on POST

【发布时间】：2021-06-27 23:39:35

【问题描述】：

我使用 create-react-app 创建了一个简单的应用程序。我现在正在尝试使用 @testing-library 和 Mock Service Worker 编写一些自动化测试用例。由于我不知道的原因，当我使用 Window.fetch（或仅获取）POST 请求时，不会返回响应的正文。

我正在使用以下依赖项：

    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "msw": "^0.28.0",
    "react": "^17.0.1"

我有以下测试：

import  rest  from 'msw';
import  setupServer  from 'msw/node';

const MOCKED_URL = 'http://mock.example.net:8080/foo'
let server = setupServer(
    rest.post(MOCKED_URL, (req, res, ctx) => 
        return res(
            ctx.status(200),
            ctx.json(req.body),
        )
    ),
)

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

test('send POST request with body via superagent', async () => 
    let response = await window.fetch(MOCKED_URL, 
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      headers:  'Content-Type': 'application/json' ,
      body:  bar: 6, baz: '34' 
    );

    console.log(response);
    expect(response.body).toMatchObject(
        bar: 6,
        baz: '34',
    )
);

console.log(response) 的输出是

        type: 'default',
        status: 200,
        ok: true,
        statusText: 'OK',
        headers: Headers 
          map:  'x-powered-by': 'msw', 'content-type': 'application/json' 
        ,
        url: '',
        bodyUsed: false,
        _bodyInit: Blob ,
        _bodyBlob: Blob 
      

谁能解释为什么没有归还尸体以及如何让这个测试起作用？

【参考方案1】：

您需要调用await response.json() 来获取响应正文。

const body = await response.json();
expect(body).toMatchObject(bar: 6, baz: '34);