Skip to content

Commit

Permalink
Rewrite jest unit tests to TypeScript (software-mansion#4399)
Browse files Browse the repository at this point in the history
## Summary

- Renamed all tests with their respective TypeScript counterparts.
- Fixed jestUtils to properly allow strict checking of AnimatedStyle.
- Added type declaration emitting to plugin.
- Moved building plugin files before running TypeScript on the project
(otherwise TypeScript tests would fail during type-checking).
- Added test for jestUtils.
- Bumped `jest` version and added `@types/react-test-renderer`.

---
Added to `jest-setup.js`:
```diff
+    delete global.MessageChannel;
```
This line is coming from `react-16-node-hanging-test-fix`. It fixes an
error of open handles in `@testing-library/react-native` function
`render` and jest going 😵.
[Reference](facebook/react#20756).

## Test plan

`yarn && yarn jest --detectOpenHandles` ftw
  • Loading branch information
tjzel authored and fluiddot committed Jun 5, 2023
1 parent c650cf0 commit 95ccc7d
Show file tree
Hide file tree
Showing 15 changed files with 832 additions and 1,095 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,4 @@ react-native-reanimated-tests.js

# plugin
!plugin/build
plugin/types
20 changes: 14 additions & 6 deletions __tests__/Animation.test.js → __tests__/Animation.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@ import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
} from '../src/';
SharedValue,
} from '../src';
import { getAnimatedStyle } from '../src/reanimated2/jestUtils';

const AnimatedSharedValueComponent = (props) => {
interface Props {
sharedValue: SharedValue<number>;
}

const AnimatedSharedValueComponent = (props: Props) => {
const widthSV = props.sharedValue;

const style = useAnimatedStyle(() => {
Expand Down Expand Up @@ -110,16 +115,17 @@ describe('Tests of animations', () => {
fireEvent.press(button);
jest.advanceTimersByTime(250);
style.width = 50; // value of component width after 250ms of animation
expect(view).toHaveAnimatedStyle(style, true);
expect(view).toHaveAnimatedStyle(style, { shouldMatchAllProps: true });
});

test('withTiming animation, define shared value outside component', () => {
let sharedValue;
let sharedValue: SharedValue<number>;
renderHook(() => {
sharedValue = useSharedValue(0);
});
const { getByTestId } = render(
<AnimatedComponent sharedValue={sharedValue} />
// @ts-expect-error TypeScript doesn't understand that renderHook defined sharedValue;
<AnimatedSharedValueComponent sharedValue={sharedValue} />
);
const view = getByTestId('view');
const button = getByTestId('button');
Expand All @@ -130,14 +136,16 @@ describe('Tests of animations', () => {
});

test('withTiming animation, change shared value outside component', () => {
let sharedValue;
let sharedValue: SharedValue<number>;
renderHook(() => {
sharedValue = useSharedValue(0);
});
const { getByTestId } = render(
// @ts-expect-error TypeScript doesn't understand that renderHook defined sharedValue;
<AnimatedSharedValueComponent sharedValue={sharedValue} />
);
const view = getByTestId('view');
// @ts-expect-error TypeScript doesn't understand that renderHook defined sharedValue;
sharedValue.value = 50;
jest.advanceTimersByTime(600);
expect(view).toHaveAnimatedStyle({ width: 50 });
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,21 +153,24 @@ describe('colors interpolation', () => {
const view = getByTestId('view');
const button = getByTestId('button');

expect(view).toHaveAnimatedStyle({ backgroundColor: '#105060' }, true);
expect(view).toHaveAnimatedStyle(
{ backgroundColor: '#105060' },
{ shouldMatchAllProps: true }
);

fireEvent.press(button);
jest.advanceTimersByTime(250);

expect(view).toHaveAnimatedStyle(
{ backgroundColor: 'rgba(71, 117, 73, 1)' },
true
{ shouldMatchAllProps: true }
);

jest.advanceTimersByTime(250);

expect(view).toHaveAnimatedStyle(
{ backgroundColor: 'rgba(96, 144, 32, 1)' },
true
{ shouldMatchAllProps: true }
);

jest.runOnlyPendingTimers();
Expand Down
File renamed without changes.
Loading

0 comments on commit 95ccc7d

Please sign in to comment.