lsb Posted June 24, 2022 Share Posted June 24, 2022 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 More sharing options...
GreenSock Posted June 25, 2022 Share Posted June 25, 2022 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 More sharing options...
Moinom Posted July 19, 2022 Share Posted July 19, 2022 I had the same issue with a component that used Scrolltrigger and found the solution here (unrelated to gsap): https://github.com/ant-design/ant-design/issues/21096 You need to mock window.matchMedia in the setupTests.js file. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now