Jump to content


Scrolltrigger TypeError: _win$1.matchMedia is not a function when running tests

Recommended Posts

I have my page working and the animation is doing what I want, I am just wanting to tests the logic of the page to make sure that is working and not the animations itself but when I try to render the the page with @testing-library/react 


import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Splash from '../Splash';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';

describe('make sure the <Splash /> page renders', () => {
    it('should render', () => {
        const history = createMemoryHistory();
        const route =
            <Router location={history.location} navigator={history}>

                    <Splash />



The splash page imports are 

import { useState, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';




but when I run npm run test --clearCache  I get the error


 FAIL  src/Pages/__tests__/splash.test.tsx
   Test suite failed to run

    TypeError: _win$1.matchMedia is not a function

       8 | import luminaEnv from '../../env';
       9 |
    > 10 | gsap.registerPlugin(ScrollTrigger);
         |      ^
      11 |
      12 | const AspectSection = ({
      13 |     score,

      at Function.matchMedia (node_modules/gsap/dist/ScrollTrigger.js:2442:23)
      at Function.enable (node_modules/gsap/dist/ScrollTrigger.js:2340:25)
      at Function.register (node_modules/gsap/dist/ScrollTrigger.js:2270:61)
      at _createPlugin (node_modules/gsap/dist/gsap.js:987:31)
      at node_modules/gsap/dist/gsap.js:3517:16
          at Array.forEach (<anonymous>)
      at Object.registerPlugin (node_modules/gsap/dist/gsap.js:3516:12)
      at Object.<anonymous> (src/Components/splashPage/AspectSection.tsx:10:6)
      at Object.<anonymous> (src/Pages/Splash.tsx:5:1)
      at Object.<anonymous> (src/Pages/__tests__/splash.test.tsx:3:1)


Do you have any ideas? like I said I don't need to test the animation just the information that the API returns

Link to comment
Share on other sites

It's pretty difficult to troubleshoot by just looking at an error message, but my guess is that your test environment doesn't have "window" defined at that point? Or window.matchMedia() doesn't exist (and of course it would in a browser but maybe your test environment doesn't?)


I'm totally guessing here. 

Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.