在 REACT 中测试来自本地节点服务器的 POST Http 请求

Question

我需要对某些 post 请求进行单元测试，但我不明白 how.I 尝试使用 mswjs 但测试通过了，因为我遗漏了一些东西而且我不知道 what.I试图以通常的方式测试请求，但我无法将我的条件放在那里，它只发送 200 个状态代码..
首先，这是我的文件夹结构：

+main folder  
++nodeServer  
+++public  
+++routes  
++public  
++src  
+++tests

这是我尝试测试对 /subscribe 端点的 post 请求，我应该在其中发送一封电子邮件作为有效载荷并获得有效载荷已成功收到的响应。
subscribeFetch.test.js:

import {setupServer} from 'msw/node'
import {rest} from 'msw'

const handlers = [
    rest.post("/api/subscribe",(req,res,context)=>{

                if (!req.body || !req.body.email) {
                  return res(context.status(400).json({ error: "Wrong payload" }));
                }
            
                if (req.body.email === 'forbidden@email.com') {
                  return res(context.status(422).json({ error: "Email is already in use" }));
                }
        
                return res(
                    context.status(200),
                    context.json({email:'gigi@gmail.com'})
                )

    })
]

const server = setupServer(...handlers)

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

test('should send post request to the server',async()=>{
    server.use(
        rest.post('/api/subscribe',(req,res,ctx)=>{
            return res(
                expect (ctx.status()).toBe(200)
            )
        }
        )
    )
})

//export {handlers,rest}

这是我需要测试的订阅post请求函数：

import { validateEmail } from './email-validator.js'

export const sendSubscribe = (emailInput) => {
  const isValidEmail = validateEmail(emailInput)
  if (isValidEmail === true) {
    sendData(emailInput)
  }
}

export const sendHttpRequest = (method, url, data) => {
  return fetch(url, {
    method: method,
    body: JSON.stringify(data),
    headers: data
      ? {
        'Content-Type': 'application/json'
      }
      : {}
  }).then(response => {
    if (response.status >= 400) {
      return response.json().then(errResData => {
        const error = new Error('Something went wrong!')
        error.data = errResData
        throw error
      })
    }
    return response.json()
  })
}

const sendData = (emailInput) => {
  sendHttpRequest('POST', '/api/subscribe', {
    email: emailInput
  }).then(responseData => {
    return responseData
  }).catch(err => {
    console.log(err, err.data)
    window.alert(err.data.error)
  })
}

来自服务器的文件：
app.js:

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require('./routes/index');
const communityRouter = require('./routes/community');
const analyticsRouter = require('./routes/analytics');

const app = express();
global.appRoot = path.resolve(__dirname);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/community', communityRouter);
app.use('/analytics', analyticsRouter);

module.exports = app;

index.js 来自服务器文件夹中的路由文件夹：

const express = require('express');
const router = express.Router();
const FileStorage = require('../services/FileStorage');

/* POST /subscribe */
router.post('/subscribe', async function (req, res) {
  try {
    if (!req.body || !req.body.email) {
      return res.status(400).json({ error: "Wrong payload" });
    }

    if (req.body.email === 'forbidden@email.com') {
      return res.status(422).json({ error: "Email is already in use" });
    }

    const data = {email: req.body.email};
    await FileStorage.writeFile('user.json', data);
    await res.json({success: true})
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

/* GET /unsubscribe */
router.post('/unsubscribe', async function (req, res) {
  try {
    await FileStorage.deleteFile('user.json');
    await FileStorage.writeFile('user-analytics.json', []);
    await FileStorage.writeFile('performance-analytics.json', []);
    await res.json({success: true})
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

module.exports = router;

拜托大家，帮我编写订阅端点的单元测试，以匹配服务器文件夹中路由文件夹中 index.js 文件的条件，提前谢谢！

Answer 1

所以，我在没有任何库的情况下得到了预期的结果，但我不知道它是否是一个好的方法，但至少它有效:
const app = require('../../../personal-website-server/app') const request = require('supertest')

describe('POST /subscribe', () => {
    it('should give 400 status code when email is empty', async () => {
        const email = { email: '' }
        const response = await request(app).post('/subscribe').send(email)
        if (!request.body || !request.body.email) {
            expect(response.status).toBe(400)
        }
    })
    it('should give 422 status code when email is forbidden', async () => {
        const email = { email: 'forbidden@gmail.com' }
        const response = await request(app).post('/subscribe').send(email)
        if (request.body === 'forbidden@gmail.com') {
            expect(response.status).toBe(422)
        }
    })
    it('should give 200 status code when email is valid', async () => {
        const email = { email: 'gigi@gmail.com' }
        const response = await request(app).post('/subscribe').send(email)
        expect(response.error).toBe(false)
        expect(response.status).toBe(200)
        expect(response.body.body).not.toBeNull()
    })
})

在 REACT 中测试来自本地节点服务器的 POST Http 请求

Test a POST Http request from a local node server in REACT

javascript

api

fetch

reactjs