小编riz*_*ied的帖子

我在测试使用 localstorage 保存 JWT 令牌并根据身份验证为 api 调用和路由检索它的反应组件时遇到问题。

组件本身工作正常，但是当我测试时，我在所有三个测试中都收到此错误

类型错误：localStorage.getItem 不是函数

这是我写的代码

主页.test.js

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

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


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

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

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <Home>
        <div className='unique' />
      </Home>,
   );
    expect(wrapper.contains(<div …

我的所有代码上都有这些奇怪的行，它们似乎突出显示了代码块。我如何关闭它们？我使用的是 1.30 版

链接：https : //ibb.co/z5Tt6t4

所以左边的白线。它们叫什么，我该如何关闭它们？

我正在测试一个反应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>,
   ); …

我有一个反应组件，它接受一组对象并将它们映射到视图中的另一个反应组件中。我在测试它时运气不好，因为它给出了这个错误：

类型错误：data.map 不是函数

这是我写的测试。请注意我传递了 data 属性，我认为这应该使它起作用？

内容.test.js

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

import Content from '../components/Content.jsx';

describe('<Content />', () => {
  const data = {
    created: '2017-02-21T09:50:21.441815Z',
    duration: 1575,
    final_script: 'some script',
    language: 'en-GB',
    rating: 2,
    url: 'some url',
  };
  it('renders without exploding', () => {
    mount(<Content data={ data } />);
  });
});

这是组件本身

内容.jsx

function Content(props) {
  const { data } = props;
  return (
    <div className='content_container'> …