使用 Enzyme 和 Jest 在组件中查找类名

Question

我正在尝试执行一个简单的单元测试以确认我的Register 组件呈现.container。我认为这可能是shallow 的级别/层次结构问题，或者可能是渲染问题，但我不能确定。

以下是我的Register 组件。

import React, { useState } from 'react';
import { Link, Redirect } from 'react-router-dom';

//redux
import { connect } from 'react-redux';
import { setAlert } from '../../actions/alert';
import { register } from '../../actions/auth';
import PropTypes from 'prop-types';

const Register = ({ setAlert, register, authState: { isAuthenticated } }) => {

  //...

  if (isAuthenticated) {
    return <Redirect to='/dashboard' />;
  }

  return (
    <section className='container'> <====== I want to verify this container so I can do further testing by calling find('input') on the container.
      <h1 className='large text-primary'>Sign up</h1>
      <p className='lead'>
        <i className='fas fa-user-circle'> Create Your Account</i>
      </p>
      <form onSubmit={handleSubmit} className='form'>
        <div className='form-group'>
          <input
            type='text'
            placeholder='Name'
            value={name}
            onChange={e => handleNameChange(e)}
            required
          />
        </div>
       //...
    </section>

Register.propTypes = {
  setAlert: PropTypes.func.isRequired,
  register: PropTypes.func.isRequired,
  authState: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  authState: state.auth 
});

export default connect(mapStateToProps, { setAlert, register })(Register);

这是我的 App 组件，它显示了我的应用程序的层次结构：

const App = () => {
  useEffect(() => {
    if (localStorage.token) {
      setAuthToken(localStorage.token);
      store.dispatch(loadUser());
    }
  }, []); 

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Route exact path='/' component={Landing} />
          <section className='container'>
            <Alert />
            <Switch>
              <Route exact path='/Register' component={Register} />
              <Route exact path='/Login' component={Login} />
              //...
     </Provider>
   );

export default App;

以下是我的测试文件，以及我所有尝试使用dive() 是否处于正确级别，或使用不同的酶方法，如find()、hasClass() 等。

我尝试在渲染期间显式传递组件所需的道具，并将它们作为我的模拟商店的初始状态传递。

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import configureMockStore from 'redux-mock-store'; 
import { Provider } from 'react-redux'; store

// Component to be tested
import Register from '../../../src/components/auth/Register';
// Props for the Register component
import { setAlert } from '../../../src/actions/alert';
import { register } from '../../../src/actions/auth';

// Mock Store
const mockStore = configureMockStore();
const store = mockStore({
  setAlert: setAlert,
  register: register,
  authState: {
    isAuthenticated: false,
    loading: false,
  },
});

describe('<Register /> component renders a <section> with className container.', () => {
  let props;

  beforeEach(() => {
    props = {
      setAlert: setAlert,
      register: register,
      authState: {
        token: localStorage.getItem('token'),
        isAuthenticated: false,
        loading: false,
        loggedInUser: null,
      },
    };
  });

  test("Attempt #1: No dive() and .find('section')", () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    );
    const section = wrapper.find('section');
    expect(section.length).toBe(1); // Section.length returns 0
  });

  test("Attempt #2: Use dive() and .find('section')", () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    ).dive();
    const section = wrapper.find('section');
    expect(section.length).toBe(1); // Section.length returns 0
  });

  test("Attempt #3: No dive() and .hasClass('container')", () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    );
    expect(wrapper.hasClass('container')).toEqual(true); // hasClass returns false
  });

  test("Attempt #4: Use dive() and .hasClass('container')", () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    ).dive();
    expect(wrapper.hasClass('container')).toEqual(true); // hasClass returns false
  });

  test('Attempt #5: No dive() and .to.have.lengthOf(1)', () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    );
    expect(wrapper.find('.container')).to.have.lengthOf(1); // Can't read property have of undefined
  });

  test('Attempt #6: Use dive() and .to.have.lengthOf(1)', () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Register {...props} />
      </Provider>
    ).dive();
    expect(wrapper.find('.container')).to.have.lengthOf(1); // Can't read property of undefined
  });
});

以下是wrapper.debug()的输出：

// The wrapper without dive()
<ContextProvider value={{ store: { getState: [Function: getState], getActions: [Function: getActions], dispatch: [Function: dispatch], clearActions: [Function: clearActions], subscribe: [Function: subscribe], replaceReducer: [Function: replaceReducer] }, subscription: { store: { getState: [Function: getState], getActions: [Function: getActions], dispatch: [Function: dispatch], clearActions: [Function: clearActions], subscribe: [Function: subscribe], replaceReducer: [Function: replaceReducer] }, parentSub: undefined, unsubscribe: null, listeners: { notify: [Function: notify] }, handleChangeWrapper: [Function: bound handleChangeWrapper], onStateChange: [Function: notifyNestedSubs] } }}>
      <Connect(Register) setAlert={[Function: setAlert]} register={[Function: register]} authState={{ token: null, isAuthenticated: false, loading: false, loggedInUser: null }} />
    </ContextProvider>

// The Wrapper using dive():
<Connect(Register) setAlert={[Function: setAlert]} register={[Function: register]} authState={{ token: null, isAuthenticated: false, loading: false, loggedInUser: null }} />

我所有的尝试要么返回 0 个节点，要么返回 false。我看的不是正确的水平吗？每次尝试是否都因潜在的缺少 prop 要求而失败，该要求未能尝试呈现组件？

以下是我的 repo 的链接，在分支 test-component-help 下：

My Repo

以及相关文件的位置：

测试文件：./client/__tests__/components/auth/Register.test.js

组件：./client/src/components/auth/Register.js

Answer 1

这可能与您使用shallow 渲染组件这一事实有关，它仅渲染上层组件（没有它是children）因此，您的内在孩子将不存在。

将shallow 渲染更改为渲染整个组件的mount。

小贴士，您可以致电wrapper.debug() 来查看呈现的包装器的“html”。

Answer 2

• 不要将authState 作为prop 传递给组件，您需要有正确的模拟存储并且它会作为prop 发送到您的Register 组件。 （而不是你现在正在做的显式道具）。

将您的 mockStore 更新为（或在其范围内为此测试提供单独的模拟）：

const store = mockStore({
authState: {
        isAuthenticated: true,
        loading: false,
      }
});

然后，您可以使用这 4 次尝试来运行测试。我想他们会通过的。

Answer 3

通过将 Redux 逻辑方面与组件方面分开，我能够在我的 Register 组件中找到 .container className。 Redux 逻辑在单独的操作测试文件和 reducer 测试文件中进行测试，允许我在没有 Redux 逻辑的情况下测试组件的渲染。

为了在没有 Redux 逻辑的情况下测试组件，我必须导出一个未连接到 Redux 存储的组件版本：

/// *** Export the non-connected version of the component for testing.
export const Register = ({ setAlert, register, authState: { isAuthenticated } }) => {
  //...

  if (isAuthenticated) {
    return <Redirect to='/dashboard' />;
  }

  return (
    <section className='container'> <====== I want to verify this container so I can do further testing by calling find('input') on the container.
      <h1 className='large text-primary'>Sign up</h1>
      <p className='lead'>
        <i className='fas fa-user-circle'> Create Your Account</i>
      </p>
      <form onSubmit={handleSubmit} className='form'>
        <div className='form-group'>
          <input
            type='text'
            placeholder='Name'
            value={name}
            onChange={e => handleNameChange(e)}
            required
          />
        </div>
       //...
    </section>

Register.propTypes = {
  setAlert: PropTypes.func.isRequired,
  register: PropTypes.func.isRequired,
  authState: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  authState: state.auth 
});

export default connect(mapStateToProps, { setAlert, register })(Register);

现在我有一个没有 Redux 逻辑的组件版本，我可以导入它并测试它：

import React from 'react';
import { shallow } from 'enzyme';

// *** Import the non-connected component for testing.
import { Register } from '../../../src/components/auth/Register';

// Globals for test
let props;
let wrapper;
let mockSetAlert = jest.fn();
let mockRegister = jest.fn();

// *** No longer need to mock a store to connect to.

describe('<Register /> component.', () => {
  beforeEach(() => {
    props = {
      setAlert: mockSetAlert,
      register: mockRegister,
      authState: {
        isAuthenticated: false,
      },
    };

    // *** No longer need to use a Provider to connect the component to the Redux store
    wrapper = shallow(<Register {...props} />);
  });

  test('Renders a <section> with className container.', () => {
    const section = wrapper.find('section');
    expect(section.length).toBe(1); 
  });

不需要连接到 Redux 存储的 Provider，层次结构很简单。没有 Redux store，也不会混淆是通过 store 传递 props，还是在渲染时直接传递 props。