为 material-ui 实现 createMatchMedia()。我正在使用材质 ui 隐藏组件来隐藏按钮，同时我正在尝试测试它们答案

【问题标题】：Implementing createMatchMedia() for material-ui. I'm using a material ui hidden component to hide buttons while I'm trying to test them为 material-ui 实现 createMatchMedia()。我正在使用材质 ui 隐藏组件来隐藏按钮，同时我正在尝试测试它们
【发布时间】：2021-03-09 15:25:10
【问题描述】：

我正在使用 React-testing-library getByText 来查找一个按钮，该按钮被名为 Hidden 的材质 ui 组件隐藏。由于 RTL 找不到它，Material ui 在https://material-ui.com/components/use-media-query/#testing 有一个实现。但我不知道如何实现它来简单地找到一个按钮。删除隐藏后，该按钮就位于，我只是不确定如何在我的测试中使用他们的 createMatchMedia() 进行查询。

Hidden 组件将我的按钮隐藏在 959px 及以下。

import React from "react"
import { render } from '../../../../test/test-utils'
import Collections from "./Collections"
import userEvent from '@testing-library/user-event'
import mediaQuery from 'css-mediaquery'

function createMatchMedia(width: any) {
  return (query: string): any => ({
    matches: mediaQuery.match(query, { width }),
    addListener: () => {},
    removeListener: () => {},
  });
}

type CollectionsProps = React.ComponentProps<typeof Collections>

const baseProps: CollectionsProps = {
  setValue: () => {},
  setSelectedIndex: () => {},
  pageStyle: {},
  pageAnimations: {transition : {}, variants: {}},
  motions: {animate:'', initial: '', exit: ''},
  jumpTo: (jumpingTarget: string | number | Element): void => {}
}

const renderUI = (props: Partial<CollectionsProps>) =>
     render(<Collections {...baseProps} {...props} />, {}) 

describe('When a filter is clicked', () => {

  beforeAll( () => {
    window.matchMedia = createMatchMedia(window.innerWidth)
  })

  let { getByText } = renderUI({})

    test('items shown are only related to the picked Category', () => {
      userEvent.click(getByText(/Team Colors/))
    })  
})

【问题讨论】：

标签： javascript reactjs typescript material-ui react-testing-library

【解决方案1】：

RTL 不是这里的问题。问题出在jsdom 中，它没有matchMedia() 的实现。 Jest 在内部使用 jsdom，并且在没有现有 matchMedia() 的情况下，没有媒体查询将匹配 Material UI 的 Hidden API。

您可以通过先安装 NPM 包 css-mediaquery 和 @types/css-mediaquery 来解决此问题。
然后像这样为matchMedia 创建一个模拟：

// matchMedia.mock.ts
export const createMatchMedia = (width: number) => (query: string): MediaQueryList => ({
  matches: mediaQuery.match(query, { width }),
  media: query,
  onchange: null,
  addListener: () => jest.fn(),
  removeListener: () => jest.fn(),
  addEventListener: jest.fn(),
  removeEventListener: jest.fn(),
  dispatchEvent: jest.fn()
});

window.matchMedia = createMatchMedia(window.innerWidth);

export default {};

将上面的模拟文件导入setupTest.ts（您的 Jest 测试设置文件），如下所示：

// setupTests.ts
import './__mocks__/matchMedia.mock';
...

像往常一样编写测试。无需使用beforeAll() 来创建新的window.matchMedia。模拟文件会为您解决这些问题。

【讨论】：