Reactjs 不确定我是否'；我正确地编写了高阶组件

在我正在开发的React应用程序中，我将各种组件包装在我编写的HOC中，以执行诸如检查身份验证之类的操作。我想知道我这样做是好是坏。HOC的工作和预期的一样，但我想知道我是否在做一些不太好的事情。下面是一个例子： 如果用户转到/profile，则呈现组件

ProfilePage.js

：

import React from 'react';
import Profile from './Profile';
import withLogin from './hoc/withLogin';
import { connect } from 'react-redux';

export const ProfilePage = props => <div> <Profile /> </div>

const mapStateToProps = ({ auth }) => ({ auth });
export default connect(mapStateToProps)(withLogin(ProfilePage));

这是我的

withLogin.js

文件：

import React from 'react';
import RequireLogin from './RequireLogin';

export default () => Component => <RequireLogin component={Component} />;

编辑：看来我没有花足够的时间研究这个测试问题。我的

withLogin

函数返回一个组件，因此我需要在测试用例中对其进行浅层渲染。像这样：

import React from 'react';
import { shallow } from 'enzyme';
import withLogin from '../withLogin';

test('withLogin renders RequireLogin', () => {
    const MyComponent = () => <div>myComponent</div>;
    const Wrapped = withLogin(MyComponent);
    const wrapper = shallow(<Wrapped />);
    expect(wrapper).toMatchSnapshot();
});

但快照仅返回以下内容：

// Jest Snapshot v1

exports[`withLogin renders RequireLogin 1`] = `[Function]`; //Here i would expect to see an instance of <RequireLogin />

// Jest Snapshot v1

exports[`RequireLogin renders <Component /> if auth is valid 1`] = `<[object Object] />`; //Here i would expect <Component />

exports[`RequireLogin renders <Loading /> if auth is null 1`] = `<Loading />`;

exports[`RequireLogin renders <Redirect to="/profile" /> if auth is false 1`] = `
<Redirect
  push={false}
  to="/"
/>
`;

但快照会返回以下内容：

// Jest Snapshot v1

exports[`withLogin renders RequireLogin 1`] = `[Function]`; //Here i would expect to see an instance of <RequireLogin />

// Jest Snapshot v1

exports[`RequireLogin renders <Component /> if auth is valid 1`] = `<[object Object] />`; //Here i would expect <Component />

exports[`RequireLogin renders <Loading /> if auth is null 1`] = `<Loading />`;

exports[`RequireLogin renders <Redirect to="/profile" /> if auth is false 1`] = `
<Redirect
  push={false}
  to="/"
/>
`;

//Jest快照v1
导出[`RequireLogin在验证有效时呈现1`]=`//我希望在这里
导出[`RequireLogin在auth为null时呈现1`]=`；
导出[`RequireLogin在auth为false时呈现1`]=`
`;

---

我的所有其他组件的所有快照测试都按预期工作。我怀疑它可能与连接到我的Redux存储的

RequireLogin

组件有关，但我没有在测试文件中模拟存储？提前感谢您的帮助

我建议你把那些看起来不错的HOC变成道具。 这样做有很多好处。示例：由于渲染道具合成模式是在运行时合成的，所以您不必担心与编译时合成的HOC相反的名称空间冲突。 还有其他好处，请阅读下文 阅读： 或 阅读： 了解HOCs的其他好处

import React from 'react';
import { shallow } from 'enzyme';
import { RequireLogin } from '../RequireLogin';
import users from '../../../fixtures/users';
test('RequireLogin renders <Loading /> if auth is null', () => {
    const wrappedComponent = <div>wrappedComponent</div>;
    const wrapper = shallow(<RequireLogin auth={null} component={wrappedComponent} />);
    expect(wrapper).toMatchSnapshot();
});

test('RequireLogin renders <Redirect to="/profile" /> if auth is false', () => {
    const wrappedComponent = <div>wrappedComponent</div>;
    const wrapper = shallow(<RequireLogin auth={false} component={wrappedComponent} />);
    expect(wrapper).toMatchSnapshot();
});

test('RequireLogin renders <Component /> if auth is valid', () => {
    const wrappedComponent = <div>wrappedComponent</div>;
    const wrapper = shallow(<RequireLogin auth={users[0]} component={wrappedComponent} />);
    expect(wrapper).toMatchSnapshot();
});

// Jest Snapshot v1

exports[`RequireLogin renders <Component /> if auth is valid 1`] = `<[object Object] />`; //Here i would expect <Component />

exports[`RequireLogin renders <Loading /> if auth is null 1`] = `<Loading />`;

exports[`RequireLogin renders <Redirect to="/profile" /> if auth is false 1`] = `
<Redirect
  push={false}
  to="/"
/>
`;