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);

成分的Jest酶测试

1 个答案: