Fix matchMedia not present in jest test (#7344)

close #6560 close #3308 close #7341
7 years ago · 742999ff28
3 changed files with 11 additions and 17 deletions
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@ -1,7 +1,8 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
+import React from 'react';
 import debounce from 'lodash.debounce';

+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
 if (typeof window !== 'undefined') {
  const matchMediaPolyfill = (mediaQuery: string): MediaQueryList => {
    return {
@ -15,9 +16,11 @@ if (typeof window !== 'undefined') {
  };
  window.matchMedia = window.matchMedia || matchMediaPolyfill;
 }
-
-import SlickCarousel from 'react-slick';
-import React from 'react';
+// Use require over import (will be lifted up)
+// make sure matchMedia polyfill run before require('react-slick')
+// Fix https://github.com/ant-design/ant-design/issues/6560
+// Fix https://github.com/ant-design/ant-design/issues/3308
+const SlickCarousel = require('react-slick').default;

 export type CarouselEffect = 'scrollx' | 'fade';
 // Carousel
--- a/tests/setup.js
+++ b/tests/setup.js
@ -2,17 +2,6 @@ import { jsdom } from 'jsdom';

 // fixed jsdom miss
 if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = function matchMediaPolyfill() {
-    return {
-      matches: false,
-      addListener() {
-      },
-      removeListener() {
-      },
-    };
-  };
-  window.matchMedia = window.matchMedia || matchMediaPolyfill;
-
  const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>';
  global.document = jsdom(documentHTML);
  global.window = document.parentWindow;
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@ -90,4 +90,6 @@ declare module "*.json" {
  export default value;
 }

-declare module "prop-types"
+declare module "prop-types"
+
+declare function require(name: string): any;