Redux测试 - ReferenceError:未定义localStorage

Question

我目前在我的redux操作上运行测试时遇到了很多麻烦.测试通过,但每次运行时都会出现以下错误:

ReferenceError: localStorage is not defined

之前我也遇到了一个错误:

ReferenceError: fetch is not defined

我通过使用isomorphic-fetch来解决这个问题.无论如何,我不确定如何配置Mocha来运行这些前端测试.任何帮助将非常感激.

---

摩卡测试命令:

mocha -w test/test_helper.js test/*.spec.js

---

test_helper.js:

require('babel-register')();
var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;

Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

documentRef = document;

---

auth.actions.spec.js

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import * as actions from '../client/app/actions/auth'
import * as types from '../client/app/constants/ActionTypes'
import nock from 'nock'
import chai from 'chai'
import sinon from 'sinon'

var expect = chai.expect

import { SERVER_API } from './config'

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

describe('auth actions', () => {

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

it('creates LOGIN_REQUEST and LOGINSUCCESS when correct username and password provided', () => {

    nock(SERVER_API)
    .post('/login', {
      username: 'test',
      password: 'password'
    })
    .reply(200, {
      token: 'TOKEN'
    });

    const expectedActions = [
    { 
        type: types.LOGIN_REQUEST,
        isFetching: true,
        isAuthenticated: false,
        creds: {
          username: 'test',
         password: 'password'
        } 
    },
    { 
        type: types.LOGIN_SUCCESS,
        isFetching: false,
        isAuthenticated: true,
        token: 'TOKEN'
    }
    ]

    const INITAL_STATE = {
      isFetching: false,
      isAuthenticated: false
    }
    const store = mockStore(INITAL_STATE)

    return    store.dispatch(actions.loginUser({username:'test',password:'password'}))
       .then(() => {
        expect(store.getActions()).to.deep.equal(expectedActions)
       })
    })
})

---

auth.js

import { push } from 'react-router-redux'
import 'es6-promise'
import fetch from 'isomorphic-fetch'

import {
  LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE
} from '../constants/ActionTypes.js'

import { SERVER_PORT } from '../constants/config'


function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

function receiveLogin(user) {
  return {
    type: LOGIN_SUCCESS,
    isFetching: false,
    isAuthenticated: true,
    token: user.token
  }
}

function loginError(message) {
  return {
    type: LOGIN_FAILURE,
    isFetching: false,
    isAuthenticated: false,
    message
  }
}

export function loginUser(creds) {

  let config = {
    method: 'POST',
    headers: { 'Content-Type':'application/x-www-form-urlencoded' },
    body: `username=${creds.username}&password=${creds.password}`
  }

  return dispatch => {
    dispatch(requestLogin(creds))
    return fetch('http://localhost:'+SERVER_PORT+'/api/login', config)
      .then(response =>
        response.json()
        .then(user => ({ user, response }))
      ).then(({ user, response }) =>  {
        if (!response.ok) {
          dispatch(loginError(user.message))
          return Promise.reject(user)
        }
        else {
          dispatch(receiveLogin(user))
          localStorage.setItem('token', user.token) //offending line
          dispatch(push('foo'))
        }
      }).catch(err => console.log("Error: ", err))
  }
}

---

谢谢.

Answer 1

相当简单的错误,你不能localStorage在你的mocha测试中使用,因为window.localStorage没有定义.有两种方法可以解决这个问题.更"经典"的方式是localStorage从你的动作中移动该调用,因为这是一个副作用,它是redux动作中的反模式.相反,你应该有中间件来捕获这个动作并设置localStorage.

通过这样做,您已经消除了测试此操作的问题.

但是,如果您不知道如何做到并且认为不明智,那么您可以localStorage通过在mocha测试文件的顶部创建一个全局变量来"伪造" ,从而创建一个假的localStorage.我建议不要使用这个,但它肯定是一个可以在你的情况下工作的解决方案.