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
