Skip to main content
Version: 1.4.0

Jest testing guide

Setting up a mock

This library includes a built in mock for Jest. To use it, add the following code to the jest setup file:

jest.mock("react-native-keyboard-controller", () =>
require("react-native-keyboard-controller/jest"),
);

Test case example

Once you've set up mock - you can write your first test 😊. A sample of test case is shown below. For more test cases please see this link.

import "@testing-library/jest-native/extend-expect";
import React from "react";
import { Animated } from "react-native";
import { render } from "@testing-library/react-native";

import { useKeyboardAnimation } from "react-native-keyboard-controller";

function TestComponent() {
const { height } = useKeyboardAnimation();

return (
<Animated.View
testID="view"
style={{ transform: [{ translateY: height }] }}
/>
);
}

describe("basic keyboard interaction", () => {
it("should have different styles depends on position", () => {
const { getByTestId, update } = render(<TestComponent />);

expect(getByTestId("view")).toHaveStyle({ transform: [{ translateY: 0 }] });

(useKeyboardAnimation as jest.Mock).mockReturnValue({
height: new Animated.Value(150),
progress: new Animated.Value(0.5),
});
update(<TestComponent />);

expect(getByTestId("view")).toHaveStyle({
transform: [{ translateY: 150 }],
});

(useKeyboardAnimation as jest.Mock).mockReturnValue({
height: new Animated.Value(300),
progress: new Animated.Value(1),
});
update(<TestComponent />);

expect(getByTestId("view")).toHaveStyle({
transform: [{ translateY: 300 }],
});
});
});