单元测试:如何模拟axios的反应?

时间:2018-02-07 07:33:46

标签: reactjs unit-testing

我正在 getArticlesFromDatabase 中测试一个axios。

好像我做错了,导致控制台显示以下消息:

  

(node:36919)UnhandledPromiseRejectionWarning:未处理的承诺   拒绝(拒绝id:5):这里拒绝失败:
  (节点:36919)   弃用警告:已弃用未处理的承诺拒绝。在   未来,未经处理的承诺拒绝将终止   Node.js使用非零退出代码进行处理。

如何解决?

csrfData.js

import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';    
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

    it('csrfData ', function () {

        let mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

        getArticlesFromDatabase.then(function(value) {    
            console.log('getArticlesFromDatabase:    ',value);
        });

    });

});

csrfData.test.js

   <form id="form1" runat="server" method="post" name="Login" >

<div class="loginBox">    

    <img src="Images/logox.png" class="user"/>   <div class="tab"><button class="tablinks" onclick="openLog(event, 'Login')">Login</button><button class="tablinks" onclick="openLog(event,'Register')">Register</button>   <div id="Login" class="tabcontent"> <h2> Please log in</h2>
       <p>Email</p>
        <input type="text" name="text" placeholder="name@domain.com" id="txteml"/>
        <p> Password</p>
        <input type="password" name="text" placeholder="Enter password" id="txtpass"  />
        <br />
        <br />
        <input type="submit" name="submit" value="Login" />
        <br />
        <br />
        <a href="./WebForm2.aspx"> Forget password</a></div>

   <div id="Register" class="tabcontent">

    <h2> create your acount </h2>
    <p>Name</p>
    <input type="text" name="text" placeholder=" First Name last Name"  id="txtname" />
    <p>Email</p>
    <input type="text" name="email" placeholder="name@domain.com" id="textEmail" " pattern="([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$" title="Email in correct form" /> 
    <p>Password</p>
    <input type="password" name="text" placeholder="Enter password" id="textPass"   title="Password must contains eight characters, at least one letter, one number and one special character" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '');if(this.checkValidity()) form.pwd2.pattern = RegExp.escape(this.value);"/>
    <p> Confirm Password</p>
    <input type="password" name="text"   placeholder="Enter the same password" id="ConPass" title="Please enter the same Password as above" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '');"/>
    <p>Company</p> 
      <br /><select  id="comp"><option >x</option><option>d</option</select><br /><br /><p>Department</p> <br /><select  id="dept"><option  >nn</option><option  >mm</option></select> 
        <br />
        <br />
        <input type="submit" name="submit" value="Save" Id="reg" onclick="Insert()" />
        <br />
        <br />
        <h1> Thank You!</h1></div></div></div>
</form>

2 个答案:

答案 0 :(得分:0)

有一个适配器插件可以帮助模拟axios

https://github.com/ctimmerm/axios-mock-adapter

如果你有返回Axios实例的通用方法

,你也可以参考我的要点

https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc

答案 1 :(得分:0)

即使我为此付出了很多努力。但是最终我找到了解决方案。

这里是:

    import { .. } from '../yourServices';
    jest.mock('axios');
    var axios = require('axios');
    //If you use get, post write as below, If you are using axios(config) dont need to mock below
    jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));

然后在您的测试中

    describe('Sample Test', () => {
        it('Should get - Test', async () => {

            const mockedResponse = Promise.resolve({
               Response data
            });

         //Make sure you mock the the functions at import (above) before using here.    
            //Post case
            axios.post.mockResolvedValue(mockedResponse);
           //Create Case
            axios.create.mockResolvedValue(mockedResponse);
           //get ....


           //If you use default axios(url, config) or axios(config)
            axios.mockResolvedValue(mockedResponse);

            //Your code
        });
});