當測試包含反應光滑的create-react-app組件時，matchMedia不存在？

我試圖創建測試文件爲我存在的項目，該項目由當測試包含反應光滑的create-react-app組件時，matchMedia不存在？

https://github.com/facebookincubator/create-react-app

是構建但我得到這個錯誤，當我跑npm test a

FAIL src/__tests__/movie_single/MovieSingle-test.js 
    ● Test suite failed to run 

    matchMedia not present, legacy browsers require a polyfill 

     at Object.MediaQueryDispatch (node_modules/enquire.js/dist/enquire.js:226:19) 
     at node_modules/enquire.js/dist/enquire.js:291:9 
     at Object.<anonymous>.i (node_modules/enquire.js/dist/enquire.js:11:20) 
     at Object.<anonymous> (node_modules/enquire.js/dist/enquire.js:21:2) 
     at Object.<anonymous> (node_modules/react-responsive-mixin/index.js:2:28) 
     at Object.<anonymous> (node_modules/react-slick/lib/slider.js:19:29) 
     at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18) 
     at Object.<anonymous> (src/components/movie_single/MovieDetailsBox.js:4:45) 
     at Object.<anonymous> (src/components/movie_single/MovieSingle.js:3:50) 
     at Object.<anonymous> (src/__tests__/movie_single/MovieSingle-test.js:3:46) 
     at process._tickCallback (internal/process/next_tick.js:103:7) 

Test Suites: 1 failed, 1 total 
Tests:  0 total 
Snapshots: 0 total 
Time:  2.642s 
Ran all test suites matching "a".

所以這是我package.json

{ 
    "name": "xxx", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "autoprefixer-stylus": "0.10.0", 
    "concurrently": "3.0.0", 
    "react-scripts": "0.6.1", 
    "stylus": "0.54.5" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "watch": "concurrently --names 'webpack, stylus' --prefix name 'npm run start' 'npm run styles:watch'", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject", 
    } 
}

這是我的MovieSingle-test.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MoviesSingle from '../../components/movie_single/MovieSingle'; 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(<MoviesSingle />, div); 
});

那麼，我該如何解決這個問題，並至少使共同的反應組件測試通過？

謝謝！

來源

2016-12-28 user3403614

我剛剛碰到它爲好，這裏是幫了我：

從here得到test-setup.js，並將它放置到src目錄

window.matchMedia = window.matchMedia || function() { return { matches : false, addListener : function() {}, removeListener: function() {} }; };

將以下內容添加到package.json

"jest": { "<rootDir>\\src\\test-setup.js", "<rootDir>\\config\\polyfills.js" },

看看是否有幫助。

來源

2017-01-22 19:00:10 mike123

添加src/setupTests.js到您的項目（這將運行測試之前執行）：

/** 
* fix: `matchMedia` not present, legacy browsers require a polyfill 
*/ 
global.matchMedia = global.matchMedia || function() { 
    return { 
     matches : false, 
     addListener : function() {}, 
     removeListener: function() {} 
    } 
}

來源

2017-02-18 14:20:54 maow

這工作，謝謝！ –

採取從錯誤消息的線索：

matchMedia不存在，傳統的瀏覽器需要polyfill

這就是說，某些功能在測試時不可用並且需要以某種方式實現這是行動。

找到一個合適的polyfill代碼matchMedia如this polyfill。

然後在名爲setupTests.js的src文件夾中創建一個新文件，並將polyfill代碼粘貼到文件中。在測試運行之前，React腳本注意這個文件將被執行。

現在再次運行測試。它是固定的。 Others有同樣的問題。

來源

2017-08-19 16:22:47 Wickramaranga

當測試包含反應光滑的create-react-app組件時，matchMedia不存在？

回答

相關問題