2

我正在使用摩卡咖啡和酶来测试我的反应成分。我对反应组件中的全局范围（localStorage）有疑问。

Foo.js

import React, { PropTypes } from 'react';

const propTypes = {};

const defaultProps = {};

class Foo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
  localStorage.setItem("lastname", "Smith");
    return (
      <div className="foo"></div>
    );
  }
}

Foo.propTypes = propTypes;
Foo.defaultProps = defaultProps;

export default Foo;

下面是 Foo 组件的单元测试代码。

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import Foo from '../src/Foo';

describe("A suite", function() {

  it("contains spec with an expectation", function() {
    expect(shallow(<Foo />).is('.foo')).to.equal(true);
  });

  it("contains spec with an expectation", function() {
    expect(mount(<Foo />).find('.foo').length).to.equal(1);
  });

});

当我运行测试时，我收到以下错误。

ReferenceError: localStorage 未定义

当像 localStorage 这样的全局对象存在组件渲染方法时，似乎会发生此错误。

有什么解决办法吗？？

4

1 回答 1

0

mocha测试套件运行在node.js环境下，不是浏览器，localstorage只存在于浏览器中，不存在于node.js中，

所以你需要使用一些包来模拟nodejs中的localstorage

试试这个 npm 包： https ://www.npmjs.com/package/dom-storage

先通过 npm 安装这个包

npm i dom-storage -D

然后在 Foo.js 中添加这些代码

if( typeof window === undefined ){
    const Storage = require('dom-storage')
    const localStorage = new Storage('./db.json', { strict: false, ws: '  ' })
}

然后你设置的每一个东西setItem()都会存储到db.json

如果您想在浏览器上运行代码时保留原始的 localStorage

于 2016-03-08T10:20:32.137 回答