摩卡酶全球范围界定问题

Question

我正在使用摩卡咖啡和酶来测试我的反应成分。我在 React 组件中遇到全局范围 (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

摩卡酶全球范围界定问题

mocha enzyme global scoping issue

mocha.js

enzyme