chenglou / chenglou/react-motion

how to test animations

Open
#566 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

Hi,
I'm using StaggeredMotion and spring to create a basic animation, and I'm trying to implement automated tests to check the animation is running as expected when triggered, however I can't figure out how to correctly implement this.

The idea is doing something like this:

```
describe('test animation', () => {
let clock;

beforeEach(() => {
clock = sinon.useFakeTimers();
})

afterEach(() => {
clock.restore();
});

it('animation should progress', () => {
[...]
clock.tick(200);
// check the state of some nodes here
[...]
});
});
```

But this doesn't seem to work as expected (I'm using a `create-react-app` environment), so I think I'm missing something important. Sorry if the question is dummy but I couldn't find examples about achieving this. I would appreciate if anyone could help ?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the StaggeredMotion and spring example in the create-react-app environment described, using Sinon fake timers as shown. Check how animation updates are scheduled and determine what a working automated test must observe after advancing the clock. Done means documenting a reliable testing approach with a representative example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing-qa
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.