Jump to content
GreenSock

lsb

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 =
            '/ddsfsdf/sfsfertet
        history.push(route);
        render(
            <Router location={history.location} navigator={history}>

                    <Splash />

            </Router>
        );
    });
});

 

The splash page imports are 
 

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

gsap.registerPlugin(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.
×