GeekyAnts / GeekyAnts/NativeBase
Improve testing by disabling animations
- 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
Assessment
This issue has not been assessed yet.