Possible ways to detect missing image assets in tests

[fleetdm]

Possible ways to detect missing image assets in tests

[zwass]

@noahtalerman I am not totally clear on how importing assets in JS works. Would this approach (1) actually check that the contents of the img tag match the source file?

[noahtalerman]

Would this approach (1) actually check that the contents of the img tag match the source file?

I believe yes.

import React from 'react'; 
import {shallow} from 'enzyme';

import Logo from "./../Logo"; 
import logoImage from "./../../../assets/images/logo.png;

describe("<Logo />", () => {
    it("renders an image", () => {
        const logo = shallow(<Logo />);

        expect(logo.find("img").prop("src")).toEqual(logoImage);

     });
 });

Approach (1) is inspired by the example code above. In the example, one image asset is imported and used to check one img tag. Approach (1) builds on this idea by creating a grouping of all possible (expected) assets and then checking that the src of each img tag is included in the grouping.

I'm not yet clear on the details of Jest's .toHaveProperty().

[noahtalerman]

From Slack:

After more thinking, I’m flipping on my decision to write unit tests to check that all img tags have a source that doesn’t 404.
I think if I wrote the tests now, they would require a decent amount of upkeep when we make further changes to icons in the front end code. To me, it now makes more sense to include tests for broken images when we tackle end to end testing.
For now, instead of writing the unit tests, I’m going to spend 30-60 min QAing the front end to make sure there are no broken images or additional bugs. I’ll be performing a similar QA pass before each release.