首页 文章

浅层渲染用酶无法找到元素

提问于
浏览 次
3

我试图对我的一个React组件进行单元测试，但是Enzyme的浅渲染方法是说它无法在组件中找到元素 . 该组件根据身份验证支持呈现不同的导航链接 .

导航组件：

class Header extends Component {

      renderLoginNav() {
        switch(this.props.auth) {
            case null:
                return;
            case false:
                return (
                    <li key={ 1 }><a className="nav-link" href="/auth/google" 
                     id="google">Login</a></li>
                );
            default: 
                return [
                    <li key={ 2 } className="nav-item">
                        <a className="nav-link" href="/lists">Dashboard</a></li>,
                    <li key={ 3 } className="nav-item">
                        <a className="nav-link" href="/credits">Credits</a></li>,
                    <li key={ 4 } className="nav-item">
                        <a className="nav-link" href="/api/logout">Logout</a></li>
                ];
        }
    }
    render() {
        return (
                <nav>
                    <ul>
                        {this.renderLoginNav()}
                    </ul>
                </nav>
        );
    }
}
function mapStateToProps(state) {
    return {
        auth: state.auth
    }
}
export default connect(mapStateToProps)(Header);

酶测试：

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureStore from 'redux-mock-store';
import Header from './';

configure({ adapter: new Adapter() });
const middlewares = [];
const mockStore = configureStore(middlewares);
it('displays correct nav when authenticated', () => {
        const initialState = { auth: {} };
        const store = mockStore(initialState);
        const wrapper = shallow(<Header store={store} />);

        expect(wrapper.find('.nav-link').length).toBe(3);
    })

当这个测试运行时，它没有说“预期0为3” . 我误解了浅层渲染方法的工作原理吗？或者我的测试设置有缺陷吗？

reactjs unit-testing jestjs enzyme

2 回答

  • 0

    导航组件：

    // export the component without connecting it
export class Header extends React.Component {
  ...
}

export default connect(mapStateToProps)(Header)

    测试：

    import { Header} from '../Header' // pull off unconnected component

it('displays correct nav when authenticated', () => {
  // see how we mock the props received by the store
  let wrapper = shallow(
    <Header
      auth={{}}
    />
  )
  expect(wrapper.find('.nav-item')).toHaveLength(3) // jest syntax
})
    回复于
  • 2

    对于redux连接组件，使用 shallow 时必须使用 .dive()

    const wrapper = shallow(<Header store={store} />).dive();

    请阅读这篇文章：Testing a Redux-connected component using Enzyme issue和ShallowWrapper .dive()

    回复于

相关问题