用酶浅渲染找不到元素

Posted 2023-03-08

【中文标题】用酶浅渲染找不到元素

【英文标题】：Shallow render with enzyme can't find elements

【发布时间】：2018-09-25 12:03:59

【问题描述】：

我正在尝试对我的一个 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”失败。我是否误解了浅渲染方法的工作原理？还是我的测试设置有缺陷？

【问题讨论】：

浅渲染不会渲染整个树。只有一层深。可以在测试用例import Header from './'中导出Header组件并导入命名为import；

通常在使用shallow 对连接的组件进行功能单元测试时，导出组件并在没有存储的情况下对其进行测试。您可以模拟从商店收到的任何道具

啊，我不知道。谢谢

【参考方案1】：

导航组件：

// 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()