Тестовый компонент логотипа в React Jest

Question

У меня такое же требование, как и Jest + Enzyme: Как проверить изображение src?

, где я хочу протестировать компонент Logo, который состоит только из изображения 'logo.png'.Я попробовал решение, на которое ответил thierno .

Компонент логотипа

import React from 'react';
import PropTypes from 'prop-types';
export default function LogoJCpenney1({ logopath, logowidth }) {         
    return (
        <img src={logopath} alt="logo" width={logowidth} className="logoOriginal"/>
    );
}
LogoJCpenney1.propTypes = { 
    /** original logo path of JCPenney */
    logowidth: PropTypes.string
};
LogoJCpenney1.defaultProps = {  
    className:"logoOriginal"    
};

Тестовый компонент

import React from 'react';
import {configure, shallow} from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter:new Adapter()});

import logoImage from "./../../containers/assets/img/jcpenneylogo1.png";
describe("<LogoJCpenney1 />", () => {
    it("renders an image", () => {
        const logo = shallow(<LogoJCpenney1 logoImage={logoImage} logowidth="50" />);
        expect(logo.find("img").prop("src")).toEqual(logoImage);
    });
});

Результат теста

Любая помощь приветствуется.

Answer 1

Вы отправляете logoImage реквизит в свой LogoJCpenney1 компонент, но компонент на самом деле хочет получить logopath реквизит (который он будет использовать в качестве src изображения).Вы не должны использовать путь к import в фактическом изображении логотипа.Вы должны просто пройти по пути как logopath опора.

Причина, по которой вы получаете Expected string but received undefined, заключается в том, что logo.find("img").prop("src") на самом деле undefined ... так как вы не предоставилиlogopath опора для вашего компонента.

Возможно, что-то вроде этого:

import React from 'react';
import { configure, shallow } from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

const logopath = "../../containers/assets/img/jcpenneylogo1.png";

describe("<LogoJCpenney1 />", () => {
  it("renders an image", () => {
    const logo = shallow(<LogoJCpenney1 logopath={logopath} logowidth="50" />);
    expect(logo.find("img").prop("src")).toEqual(logopath);
  });
});

---

Основываясь на другом посте StackOverflow, на который вы ссылались, вы можете подумать: «Но я не делаю»я просто хочу проверить, что src установлен правильно. Я хочу проверить, что img действительно показывает файл jcpenneylogo1.png. "

Я бы посоветовал против этого.Вам не нужно проверять, что <img> правильно отображает файл изображения, когда ему дано src.Это сторонние продукты, о которых уже позаботились React и ваш браузер, и тестировать эти вещи не ваша задача.

Поскольку вы тестируете модуль LogoJCpenney1, вам просто нужно убедиться, чтокогда вы передаете LogoJCpenney1 реквизит, называемый logopath, тогда он выдает img, у которого src равно logopath.