मैं एक बटन खोजने के लिए रिएक्ट-टेस्टिंग-लाइब्रेरी getByText का उपयोग कर रहा हूं जो हिडन नामक सामग्री ui घटक द्वारा छिपा हुआ है। चूंकि RTL इसे नहीं ढूंढ पाएगा, इसलिए सामग्री ui ने इसे यहां https पर लागू किया है ://material-ui.com/components/use-media-query/#testing। लेकिन मैं यह नहीं समझ सकता कि इसे केवल एक बटन खोजने के लिए कैसे कार्यान्वित किया जाए। एक बार जब मैं छुपा हटा देता हूं तो बटन स्थित होता है, मुझे यकीन नहीं है कि मेरे परीक्षण के भीतर एक प्रश्न के लिए उनके createMatchMedia() का उपयोग कैसे करें।

हिडन घटक मेरे बटन को 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/))
    })  
}) 
0
justkeithcarr 26 नवम्बर 2020, 21:09

1 उत्तर

सबसे बढ़िया उत्तर

आरटीएल यहां समस्या नहीं है। समस्या jsdomमें है जिसका कार्यान्वयन नहीं है matchMedia(). जेस्ट आंतरिक रूप से jsdom का उपयोग करता है और मौजूदा matchMedia() के बिना सामग्री UI के Hidden API में कोई मीडिया क्वेरी मेल नहीं खाती.

  1. आप इसे पहले एनपीएम पैकेज css-mediaquery और @types/css-mediaquery
  2. फिर 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 {};
  1. उपरोक्त नकली फ़ाइल को setupTest.ts (आपकी जेस्ट परीक्षण सेटअप फ़ाइल) में इस प्रकार आयात करें:
// setupTests.ts
import './__mocks__/matchMedia.mock';
...
  1. अपना परीक्षण वैसे ही लिखें जैसे आप सामान्य रूप से करते हैं। नया window.matchMedia बनाने के लिए beforeAll() का उपयोग करने की आवश्यकता नहीं है। नकली फ़ाइल आपके लिए इसका ख्याल रखती है।
1
Erik Töyrä Silfverswärd 23 फरवरी 2021, 23:49