Reactjs redux-如何使用nock测试异步操作

我遵循redux.org的基本exmaple来测试异步操作

action.js

我的代码如下：

import axios from 'axios'

export function getGoodDataStart(){
    return{
        type: "GOOD_DATA_START"
    }
}
export function getGoodDataSuccess(payload){
    console.log('success', payload)
    return {
        type: "GOOD_DATA_SUCCESS",
        payload: payload
    }
}
export function getGoodDataFail(){
    return{
        type: "GOOD_DATA_FAIL"
    }
}
export function getGoodData(){
    return (dispatch) => {
        dispatch( getGoodDataStart() )
        return  axios.get('http://www.google.com/list')
            .then( response => {
                console.log('fake res',response)
                dispatch(getGoodDataSuccess (response) )
            })
            .catch( err => {
                console.log('fake err',err)
            })
    }   
}

test.js

import nock from 'nock'
import React from 'react'
import {expect} from 'chai'
import {getGoodData} from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)

describe('Register component', () => {

    it('async action', function () {

        nock('http://www.google.com')
        .get('/list')
        .reply(200,'ok!' )

        const store = mockStore({ 
            myData: '' ,
        })
        const expected = [
            {type: "GOOD_DATA_START"},
            {type: "GOOD_DATA_SUCCESS", payload: 'ok!'}
        ]

        return store.dispatch(getGoodData())
            .then( () => { 
                expect(store.getActions()).to.equal(expected)
            })
    })
})

我的问题是，nock并没有阻止请求，它让函数getGoodData向google.com发出真正的请求。我做错了什么

错误的屏幕截图：

以下是演示：

安装：npmi

要测试：npm运行测试

打开url:

读取 您的测试在控制台上做得很好-

添加在您的package.json上运行的这两个脚本

---

你可能需要这样的东西

beforeEach(() => {
    nock.disableNetConnect();
});

afterEach(() => {
    nock.cleanAll();
    nock.enableNetConnect();
});

---

通常，在测试这样的动作时，您会希望从等式中删除不属于动作的任何内容。在这种情况下，通过简单地使用nock，您并没有从方程中删除axios，实际上增加了不必要的复杂性。通过使用间谍模拟axios，您可以避免进行网络呼叫，也可以完全避免呼叫axios。这允许您简单地断言使用正确的参数调用axios。间谍可以返回允许测试所有承诺处理和后续操作调用的承诺。为了演示这一点，我需要添加一个提供间谍的库，因此我选择为断言和间谍添加“expect”，但如果您想继续使用，您可以轻松地对sinon执行相同的操作

下面是一个示例，您根本不需要nock，只需用间谍模拟axios即可：

import React from 'react'
import * as registerAction from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import expect from 'expect'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)

// set up to mock axios methods
import axios from 'axios'
const _get = axios.get

const fakePayload = { foo: 'bar' };
describe('Register component', () => {
    beforeEach(() => {
        // replace the .get method temporarily with a spy
        axios.get = expect.createSpy().andReturn(Promise.resolve(fakePayload));
    })

    afterEach(() => {
        // restore the get method with our saved const
        axios.get = _get;
    })

    it('async action', function () {
        const store = mockStore({
            myData: '' ,
        })
        const expected = [
            {type: "GOOD_DATA_START"},
            {type: "GOOD_DATA_SUCCESS", payload: fakePayload}
        ]

        return store.dispatch(registerAction.getGoodData())
            .then( () => {
                expect(store.getActions()).toEqual(expected)
                expect(axios.get).toHaveBeenCalled()
                expect(axios.get).toHaveBeenCalledWith('http://www.google.com/list')
            })
    })
})

---

我认为这可能是因为在

nock

设置中有一个尾随

/

。而不是

nock（'http://example.com/）

do

nock（'http://example.com“）

：）删除了

/

，仍然没有帮助您确定您正在点击/取消完全相同的端点吗？@MarioTacke我制作了一个演示，在演示应用程序中使用指向演示的链接更新了我的问题，您没有单独运行测试，但是通过一个网页包开发服务器。这是故意的吗？为什么不使用

mocha--compilers js:babel core/register运行它呢？我添加了两个命令。运行“itest”时出错。错误：找不到模块“./options”您是如何在控制台中运行测试的？此解决方案存在相同的问题，操作仍在发出实际请求。@angry_kiwi您运行的是应用程序而不是测试，并希望nock拦截它吗？Nock只在测试中使用，我正在运行测试
import React from 'react'
import * as registerAction from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import expect from 'expect'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)

// set up to mock axios methods
import axios from 'axios'
const _get = axios.get

const fakePayload = { foo: 'bar' };
describe('Register component', () => {
    beforeEach(() => {
        // replace the .get method temporarily with a spy
        axios.get = expect.createSpy().andReturn(Promise.resolve(fakePayload));
    })

    afterEach(() => {
        // restore the get method with our saved const
        axios.get = _get;
    })

    it('async action', function () {
        const store = mockStore({
            myData: '' ,
        })
        const expected = [
            {type: "GOOD_DATA_START"},
            {type: "GOOD_DATA_SUCCESS", payload: fakePayload}
        ]

        return store.dispatch(registerAction.getGoodData())
            .then( () => {
                expect(store.getActions()).toEqual(expected)
                expect(axios.get).toHaveBeenCalled()
                expect(axios.get).toHaveBeenCalledWith('http://www.google.com/list')
            })
    })
})