Question

我目前正在尝试对媒体查询进行测试，但我不知道。我怎么可能改变窗口的宽度，使其反映到媒体查询。

我尝试了所有注释的代码来模拟宽度，但是没有用。我知道它与jsdom有关，但无法弄清楚。

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%' });
  });

这是我要测试的代码。

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

Answer 1

在经历了疯狂的艰难时光之后，我终于确定了以这种方式测试中等屏幕的可能性。

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

如何设置玩笑的媒体查询？

1 个答案: