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

ebdffaop  于 2023-01-14  发布在  Vue.js
关注(0)|答案(2)|浏览(125)

我在Vue中有一个Web应用程序,它与NodeJS中编写的REST API对话。在Web应用程序中,用户可以提交一个文件,并附带其信息。Web使用REST API将此信息传递到后端。Web端的代码:

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.bodyundefined。我不明白FormData字段在request中的位置。为什么当我从web发出请求时它工作,而从测试中不工作?

swvgeqrz

swvgeqrz1#

代替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();
            });
    });
});
nlejzf6q

nlejzf6q2#

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

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

});

相关问题