Jest Enzyme Test для компонента - PullRequest
Новая
       13

Jest Enzyme Test для компонента

0 голосов
/ 10 апреля 2020

У меня есть компонент загрузчика 

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

, поэтому я хочу проверить, отображается ли 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. Я попытался разрешить ее, выяснилось, что ее нельзя использовать для вложенных элементов, таких как img под div, так как я новичок в тестировании и React мне нужна помощь! Спасибо

1 Ответ

1 голос
/ 10 апреля 2020

Попробуйте использовать mount вместо shallow: 

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

Я бы также изменил следующее: 

expect(image).toBeTruthy();

на что-то вроде: 

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