一种成分的酶试验

Question

我有一个加载器组件

import React from 'react'
import { withStyles } from '@material-ui/styles';
import logo from '../../assets/images/hydra_eco_logo.png'

const styles = theme => ({
    image: {
        position: "absolute",
        top: "50%",
        left: "50%",
        width: "120px",
        height: "120px",
        margin: `-60px 0 0 -60px`,
        animation:`spin 4s linear infinite`,
        borderRadius: `30%`
    },
    "@keyframes spin" : { 
        "100%" : { 
            transform: "rotate(360deg)" 
        } 
    }
});



const Loader = (props) => {
    const classes = props.classes
    return(
        <div className={classes.loader}>
            <img className={classes.image} src={logo} alt="Loader Image"  />
        </div>
    )
}


export default withStyles(styles)(Loader);

所以我想测试是否显示了加载器，以及是否加载了加载器图像我的测试文件看起来像这样

import React from 'react';
import '../../../setupTests'
import { shallow} from 'enzyme';
import Loader from './Loader';
import renderer from 'react-test-renderer';
import logo from '../../assets/images/hydra_eco_logo.png';


describe('<Loader />', () => {
    it('should render without throwing an error', function() {
        expect(shallow(<Loader />).find('div img').prop("src")).toEqual(logo);
    });

    it('match src of loader image', function() {
        const wrapper = shallow(<Loader />);
        const image = wrapper.find('div img')
        expect(image).toBeTruthy();
        expect(image.prop("src")).toEqual(logo); 
    });
})

它引发错误Method “props” is meant to be run on 1 node. 0 found instead.我试图解决它，结果表明它不能用于嵌套元素，例如在div下有img，因为我是测试和React的新手，我需要帮助！谢谢

Answer 1

尝试使用mount代替shallow：

import { mount} from 'enzyme';
...
const wrapper = mount(<Loader />);

我还将更改以下内容：

expect(image).toBeTruthy();

到类似的东西：

expect(image.length).toEqual(1);