jest error matchMedia not present, legacy browsers require polyfill

[Hydrog3n]

Hello, thank you for your port.

I have error with jest test, I get this error. I see trouble on react but I didn't found solution in vuejs.

matchMedia not present, legacy browsers require a polyfill

       8 | 
       9 | <script>
    > 10 | import VueSlickCarousel from 'vue-slick-carousel'

[kieudongoctruc]

I resolved it on my end by mocking matchMedia with this

window.matchMedia = jest.fn().mockImplementation(query => {
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn()
  }
})

in a separate file, then I import this mock file to my tested file before importing my tested component

import '../../../../tests/matchMedia'
import { shallowMount } from '@vue/test-utils'
import Carousel from './Carousel.vue'

ref: https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

[Hydrog3n]

Hi @kieudongoctruc Thank you I will try with an external file because I try this code in my test file but it was not working. Maybe this as to be run before anything.

[Vlad715]

I have same problem on React the way how I solved it create file setupTests.js and add this global.matchMedia = global.matchMedia || function() { return { matches : false, addListener : function() {}, removeListener: function() {} } } then add to my jest.config.js settings module.exports = { setupFiles: ["./src/setupTests.js"], };

[mtanada-cup]

@Hydrog3n were you able to solve the issue? I'm getting "Jest encountered an unexpected token"

[sharoneh]

I'm getting the same error as @mtanada-cup, anyone got fixes for that? testing in any way is blocked with this library 😭

[Hydrog3n]

Hello, On my side I don't use it anymore and I don't remember if I fix it or if I used another lib.

[sharoneh]

thanks for the reply, @Hydrog3n! I actually ended up adding this to the jest.config.js file and it fixed things for me

transformIgnorePatterns: ['/node_modules/(?!(vue-slick-carousel)/)']

hope it helps anyone else