使用超测试提交表单数据对象时未定义请求正文

Question

我在 Vue 中有一个 Web 应用程序，它与用 NodeJS 编写的 REST API 通信。在 Web 应用程序中，用户可以提交一个文件及其信息。 Web 使用 REST API 将此信息传递到后端。网页端代码：

var formData = new FormData();
formData.append("number", this.number);
formData.append("file", this.file);
// More fields inside the Form Data object

this.$http.post('http://localhost:8081/api/new',formData,{emulateJSON: true},{
    header:{ "Content-Type":"multipart/form-data" },
}).then(function(response) {
    if (response.status == 200) {
        this.handleClose();
    } else {
        console.log("Failed to submit new report");
    }
}).catch((err) => {
    console.log("Failed to submit new report");
});

在后台，我有：

const router = require('express').Router();

router.post('/new', function(request, response) {
  console.log("New Report");
  console.log(request.body);

  var info = {
    "number": request.body.number,
    // More fields
  };
  var file = request.files.file;

  // More Code
  
});

效果很好，但现在我想为 REST 创建测试 API。我有以下代码：

const chai     = require('chai');
const nock     = require('nock');
const FormData = require('form-data');
const request  = require('supertest');

run_new_report_test: function(server) {
    describe('Test: New report check', function() {
        it('should return status 200', function(done) {
            var formData = new FormData();
            formData.append("number", "55555");
            // More fields
            request(server)
                .post('/api/new')
                .set("Content-Type", "multipart/form-data")
                .attach(formData)
                .expect(200)
                .end(function(err, res) {
                    expect(err).to.equal(null);
                    expect(res.body).to.be.an('object').that.is.not.empty;
                    expect(res.body.message).to.be.equal('success');
                    done();
                });
        });
    });
},

但是当我运行使用 mocha 进行测试时，我得到：

New Report
undefined

由于某种原因 request.body 是 undefined。我不明白 FormData 字段在 request 中的位置。为什么当我从 web 发出请求而不是从测试发出请求时它有效？

Answer 1

您在前端传递参数数据，并尝试在后端访问正文行数据，这就是未定义的原因。

试试这个

router.post('/new', function(request, response) {
console.log("New Report");
console.log(request.param);

var info = {
   "number": request.param.number,
   // More fields
};
var file = request.files.file;

 // More Code

});

Answer 2

而不是 form-data，您需要使用 .field（对于 req.body）和 .attach（对于文件）方法。查看文档：https://visionmedia.github.io/superagent/#multipart-requests

此外，您可以使用缓冲区模拟文件，您还需要添加一些文件信息，试试这个：

describe('Test: New report check', function() {

    it('should return status 200', function(done) {

        const testFile = 'test file';

        request(server)
            .post('/api/new')
            // add each filed for req.body
            .field('number', '99999')
            // mock file
            .attach('file', Buffer.from(testFile, 'utf-8'), {

                // add file info accordingly
                filename: 'file.txt',
                contentType: 'text/plain',
                knownLength: testFile.length

            })
            .expect(200)
            .end(function(err, res) {
                expect(err).to.equal(null);
                expect(res.body).to.be.an('object').that.is.not.empty;
                expect(res.body.message).to.be.equal('success');
                done();
            });
    });
});

使用超测试提交表单数据对象时未定义请求正文

Request body is undefined when submitting Form Data object using supertest

node.js

vue.js

mocha.js

form-data

supertest