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 のようなグローバル オブジェクトがコンポーネントの render メソッドに存在する場合に発生するようです。

解決策はありますか??

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 に答える