GeekyAnts / GeekyAnts/NativeBase

Improve testing by disabling animations

Open
#5,510 1 comment 0 reactions 0 assignees View on GitHub
feature request triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Possibility to disable animations/transitions globally. It can be done for:
* test only (e.g. by mocking components)
* for tests and production app (e.g. by properties in `NativeBaseProvider`)

### Problem Statement

Currently when testing some components (e.g. Modals), we can get the following error:
```
Warning: An update to [
'ForwardRef',
'\n' +
' at /Users/.../node_modules/native-base/lib/commonjs/components/composites/Transitions/Transition.tsx:69:7\n' +
...
inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
/* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s
```

It happens because after final check in tests (e.g. assert that text is visible or hidden), the components are still changing the state, e.g. Modal is hiding, or Toast is disappearing.

### Proposed Solution or API

1. Provide mocks for components that use animations/transitions or have side effects.
2. Add global configuration to use in `NativeBaseProvider` and adjust components

### Alternatives

As proposed on Discord:
1. add setTimeout to every test:
```
describe("test",() => {
it("works", done => {
const component = mount();
setTimeout(() => {
expect(component.find(p).text()).toEqual("Hello World");
done();
}, 500);
})
})
```
2. Adjust theme:
```
_fade={{ entryDuration: 0, exitDuration: 0 }}
_backdrop={{ entryDuration: 0, exitDuration: 0 }}
_backdropFade={{ entryDuration: 0, exitDuration: 0 }}
```

But I'm not sure if both of them are solving it completely. Also we need to answer if this is a good approach.

Until it is solved properly maybe this workaround can be added to documentation in testing section.

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.