Question

我正在测试一个反应HOC，它会检查localstorage中是否存在令牌。如果有，它会将用户重定向到Home组件，否则用户将被重定向到Login组件。

但是，我在最后一个测试调用componentDidMount的测试中遇到了这个奇怪的错误

的SecurityError

在HistoryImpl._sharedPushAndReplaceState（node_modules / jsdom / lib / jsdom / living / window / History-impl.js：87：15）

在HistoryImpl.pushState（node_modules / jsdom / lib / jsdom / living / window / History-impl.js：69：10）

在History.pushState（node_modules / jsdom / lib / jsdom / living / generated / History.js：72：31）

这是我写的测试：

app.test.js

import React from 'react'; 
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';

import App from '../containers/App.jsx';

describe('<App />', () => {
  beforeAll(() => {
    global.localStorage = {
      i2x_token: 'someToken',
      getItem() {
        return 'someToken';
      }
    };
  });

  it('renders without exploding', () => {
    shallow(<App />);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <App>
        <div className='unique' />
      </App>,
   );
    expect(wrapper.contains(<div className='unique' />)).to.equal(true);
  });

 it('calls componentDidMount', () => {
    sinon.spy(App.prototype, 'componentDidMount');
    const wrapper = mount(<App />);
    expect(App.prototype.componentDidMount).to.have.property('callCount', 1);
    App.prototype.componentDidMount.restore();
  });
});

`

这是组件本身：

app.jsx

import React, { Component } from 'react';
import { browserHistory } from 'react-router';

class App extends Component {
  componentDidMount() {
    if (localStorage.i2x_token) {
       browserHistory.push('/home');
    } else {
      browserHistory.push('/');
    }
  }

  render() {
    return (
      <main>
        {React.Children.toArray(this.props.children)}
      </main>
    );
  }
}

App.propTypes = {
  children: React.PropTypes.node,
};

export default App;

这是我的package.json：

的package.json

  "dependencies": {
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "3.0.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "chai": "^3.5.0",
    "cross-env": "^3.1.3",
    "css-loader": "^0.28.0",
    "enzyme": "^2.8.2",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "file-loader": "^0.11.1",
    "jest": "^19.0.2",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "node-sass": "^4.5.2",
    "react-addons-test-utils": "^15.5.1",
    "sass-loader": "^3.2.0",
    "sinon": "^2.1.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  }

我想知道出了什么问题。或许做反应路由器？

Answer 1

尝试在Jest配置中设置testURL。

Answer 2

你可以模拟browserHistory，这也可以防止你监视你的组件功能，但是间谍，让你测试重要的东西，也就是说历史被改变了

jest.mock('react-router', ()=>({browserHistory: {push: jest.fn()}}))
import { browserHistory } from 'react-router';

it('calls componentDidMount', () = > {
  const wrapper = mount(<App />);
 expect(browserHistory.push.mock.calls[0][0]).to.be('/home')
  global.localStorage = { i2x_token: 'sometoken' }
  const wrapper = mount(<App />);
  expect(browserHistory.push.mock.calls[1][0]).to.be('/home')
});

Answer 3

尽管在不同的上下文中，这个article帮助我解决了相同的错误。我使用Object.defineProperty(window.location, ...)时遇到错误。显然，由于Jest使用的软件包 jsdom 的更新，它有时停止工作。

错误测试反应组件 - SecurityError

3 个答案: