Question

我正在使用摩卡和酶来测试我的反应成分。我对反应组件中的全局范围（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这样的全局对象存在组件渲染方法时，似乎发生了这种错误。

有没有解决方案??

Answer 1

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

摩卡酶全球范围问题

1 个答案: