How to set media queries with jest?

I am currently trying to do a test on media queries but I can’t figure out. How possibly I can change width of the window so it reflects to media query.

I have tried all commented code to mock the width but no use. I know it has something to do with jsdom but cant figure out.

it('when image is WIDE and media match with medium', () => {
    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 900})

    // window.resizeBy = jest.fn();
    // window.resizeBy(900,300);
    //const mediaQuery = '(min-width: 790px)';
    // Object.defineProperty(window, "matchMedia", {
    //   value: jest.fn(() => { return { matches: true,media: mediaQuery } })
    // });
    // Object.defineProperty(window,'innerWidth', {
    //   configurable: true,
    //   writable: true,
    //   value: 790
    // });
    // Object.defineProperty(window,'innerHeight', {
    //   configurable: true,
    //   writable: true,
    //   value: 900
    // });

     window.matchMedia = jest.fn().mockImplementation(query => {
//query always display (min-width: 240px) and (max-width: 767px)

return {
        matches: true,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      };
    });
    const result = imageStretcher(aWideImage);
    expect(result).toEqual({  imgWidth: '90%', imgHeight: '40%' });
  });

This is the code I want to test.

const screenResolution = {
  smallSize: '(min-width: 240px) and (max-width: 767px)',
  mediumSize: '(min-width: 768px) and (max-width: 1200px)',
};
const sizeTypes = {
  smallSize: 'smallSize',
  mediumSize: 'mediumSize',
  normalSize: 'normalSize',
};



    const sizeSettings = {
      [PORTRAIT]: {
        smallSize: { imgWidth: '62%', imgHeight: '50%' },
        mediumSize: { imgWidth: '95%', imgHeight: '75%' },
        normalSize: { imgWidth: '70%', imgHeight: '90%' },
      },
      [WIDE]: {
        smallSize: { imgWidth: '90%', imgHeight: '30%' },
        mediumSize: { imgWidth: '90%', imgHeight: '40%' },
        normalSize: { imgWidth: '65%', imgHeight: '80%' },
      },
    };
    const screenResolutionMatcher = (imageType: number) => {
      if (window.matchMedia(screenResolution.smallSize).matches) {
         return setNewImageSize(imageType, sizeTypes.smallSize);
      } else if (window.matchMedia(screenResolution.mediumSize).matches) {
         return setNewImageSize(imageType, sizeTypes.mediumSize);
      } else {
         return setNewImageSize(imageType, sizeTypes.normalSize);
      }
    };
    export const imageStretcher = (source: string) => {
            //....
            return screenResolutionMatcher(imageType);
          }
      };

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

OK finally after having crazy rough time with this I have figured it out this way it test medium screen.

 it('when image is WIDE and media match with medium', () => {
   window.matchMedia = jest.fn().mockImplementation(query => ({
     matches: query !== '(min-width: 240px) and (max-width: 767px)',
     media: '',
     onchange: null,
     addListener: jest.fn(),
     removeListener: jest.fn()
   }));
   const result = imageStretcher(aWideImage);
   expect(result).toEqual({  imgWidth: '90%', imgHeight: '40%' });
 });
 

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply