代码之家  ›  专栏  ›  技术社区  ›  Mustkeem K

使用jestjs进行单元测试时如何获得组件的属性

  •  0
  • Mustkeem K  · 技术社区  · 6 年前

    我在用浅酶。我想在我的测试文件中获得传递给组件的道具。就像例子中那样,但我变得不明确了。

    console.log(wrapper.props()) 
    

    请帮助如何获得一些组件的道具,我想为其编写测试用例。

    这是我的代码:

    import React from 'react';
    import {
        configure,
        shallow
    } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    
    import MenuList from './MenuList';
    import {
        Link
    } from 'react-router-dom';
    
    configure({
        adapter: new Adapter()
    });
    
    const footerItem = {
        label: '',
        links: [{
            label: '',
            link: '/'
        }]
    }
    
    describe('<MenuList />', () => {
    
                let wrapper;
                beforeEach(() => {
                        wrapper = shallow( < MenuList footerItem = {
                                footerItem
                            }
                            / > );
                        });
    
                    it('should render Link', () => {
                        console.log(wrapper.props().footerItem); // This should print footerItem object but returning  undefined
                        expect(wrapper.find(Link).length).toBeGreaterThan(0);
                    });
                });
    
    // and here is the code of menulist component/
    
    
    import React from 'react';
    import { Link } from 'react-router-dom';
    
    const menuList = (props) => {
        let linkArray=[];
            linkArray = props.footerItem.links.map((item,index)=>{
                return <li key={index}>
                        <Link to={item.link}>
                            {item.label}
                        </Link></li>
            })
    
       return (
            <div className="footer-link">
                <h6>{props.footerItem.label}</h6>
                    <ul>
                        {linkArray}
                    </ul>
            </div>
       )
    }
    export default menuList;
    1 回复  |  直到 6 年前
        1
  •  1
  •   Moyote    6 年前
    const wrapper = mount(<MyComponent foo={10} />);
    expect(wrapper.props().children).to.equal(10);
    

    编辑:

    const wrapper = mount(<MyComponent foo={10} />);
    expect(wrapper.instance().props.foo).to.equal(10);