matchMedia nie jest obecna podczas testowania komponentu create-react-app, który zawiera reagujący slick?

Question

Próbowałem utworzyć plik testowy dla mojego istniejącego projektu, który był zbudowany przez

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

ale mam ten błąd, kiedy zabrakło 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". 

Więc to jest mój 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", 
    } 
} 

A to jest moje 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); 
}); 

Jak mogę to naprawić i co najmniej sprawić, aby test wspólnego składnika został zaliczony?

Dzięki!

Answer 1

Właśnie napotkasz niego, jak również, o to co pomogło mi:

1. uzyskać test-setup.js z here i umieścić go w katalogu

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

src = "2">
1. Dodaj następujące elementy do package.json

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

Sprawdź, czy to pomaga.

Answer 2

Dodaj src/setupTests.js do projektu (który zostanie wykonany przed uruchomieniem swoich testów):

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

Answer 3

Take pojęcia z komunikatem o błędzie:

matchMedia nie występuje, starszych przeglądarek wymagają polyfill

Oznacza to, że niektóre funkcje nie są dostępne podczas testowania i muszą zostać wdrożone w jakiś sposób do perfo rm akcji.

Znajdź odpowiedni kod polyfill dla matchMedia, taki jak this polyfill.

Następnie utwórz nowy plik w folderze src o nazwie setupTests.js i wklej do niego kod wielokąta. React skrypty dbają o to, aby plik ten został wykonany przed uruchomieniem testów.

Teraz ponownie uruchom testy. Jest naprawione. Others miały ten sam problem.