Questions tagged [react-native-testing-library]

The react-native-testing-library is a lightweight solution for testing your React Native components. It provides light utility functions on top of react-test-renderer letting you always be up to date with latest React features and write any component tests you like.

The react-native-testing-library is a lightweight solution for testing your React Native components. It provides light utility functions on top of react-test-renderer letting you always be up to date with latest React features and write any component tests you like.

This library is a replacement for Enzyme. It is tested to work with Jest, but it should work with other test runners as well.

https://github.com/callstack/react-native-testing-library

177 questions
37
votes
5 answers

Jest+React Native Testing Library: How to test an image src?

In my new React Native app, I want to add some Jest tests. One component renders a background image, which is located directly in the project in assets folder. Now I stumbled about how to test if this image is actually taken from this path,…
RuntimeError
  • 1,332
  • 4
  • 23
  • 41
21
votes
8 answers

react-native-testing-library: how to test useEffect with act

I am using react-native-testing-library to test my react-native component. I have a component (for the purpose of this post, it has been over simplified): export const ComponentUnderTest = () => { useEffect(() => { …
TheSoul
  • 4,906
  • 13
  • 44
  • 74
20
votes
2 answers

Why do I get the error "Received value must be an HTMLElement or an SVGElement" when using react-native?

I'm new to unit testing and I'm trying to render a component to learn more about the library. I'm trying to follow this guide. Component
theabrar
  • 360
  • 1
  • 6
  • 15
14
votes
2 answers

React Native testing - act without await

Below test is passing but I get the following warning twice and I don't know why. Could someone help me to figure it out? console.error Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour,…
Mehmet N. Yarar
  • 576
  • 9
  • 17
10
votes
2 answers

Jest Redux Persist: TypeError: Cannot read property 'catch' of undefined at writeStagedState

I'm trying to test my LoginScreen with Jest and Typescript. I use redux and redux-persist for storage and have set the storage up to use AsyncStorage as part of the config. I suspect that redux-persist is attempting to rehydrate after the built-in…
9
votes
1 answer

"SyntaxError: Cannot use import statement outside a module" error while testing React Native project with Jest and @testing-library/react-native?

Error I'm getting Anytime I run npm test: FAIL ./App.test.js ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By…
9
votes
1 answer

React Native: How to test if element is focused?

Simply test case: Want to see if a given element is focused. To check if an element is focused on a react web app with RTL and jest, you have two easy options available to you: You can check if the element is the same as document.activeElement (may…
7
votes
3 answers

React native jest.preset.js file missing error

I use @testing-library/react-native to test my RN app. When I run yarn test, following error occurs. @testing-library/react-native should have "jest-preset.js" or "jest-preset.json" file at the root. I use typescript for my app. my test script is…
Shashika Virajh
  • 8,497
  • 17
  • 59
  • 103
7
votes
1 answer

How to replace a React component with a mock when testing with Jest

I am really stuck on this in the project I am working on, and all the answers I have found seem to be so simple but they haven't worked for me. Perhaps I don't really understand what a mock is, and I could really use some guidance. I am testing a…
Śāntanu
  • 203
  • 3
  • 9
6
votes
1 answer

How to submit a form or press the enter key on an input with react-native-testing-library

I have the following problem: I need to test if a function is being called on my test, but to test it properly I need to press enter or submit the form, and it doesn't seem to work as intended. I've already tried the…
6
votes
0 answers

Setup for React Native/TypeScript/Testing Library/Jest not working

I'm trying to setup a React Native/TypeScript application to be tested with Jest and @testing-library/react-native; So far I'm getting this error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a…
5
votes
1 answer

Writing unit tests with react testing library for recharts

I'm writing unit tests for our react application. There are few components which have been created using recharts library. import { COLORS } from 'constants/colors.constants'; import { FC } from 'react'; import { Bar, BarChart, CartesianGrid,…
5
votes
2 answers

RNEncryptedStorage is undefined while running testing-library/react-native with Jest

I am trying to setup my react-native test environment with react-native-testing-library and Jest. My react-native application uses react-native-encrypted-storage. When I run my first sample test (code below) it fails saying RNEcryptedStorage is…
me_digvijay
  • 5,374
  • 9
  • 46
  • 83
5
votes
3 answers

expo app with testing react-native-testing-library and jest-native "has no exported member 'toHaveProp"

I'm trying to use jest-native as extra matchers and i'm having an installation problem i think ... I am on a react-native ts app with expo and here are my versions: expo:"~39.0.0" @testing-library/react-native version:"^7.1.0" jest-preset:…
E.D
  • 831
  • 3
  • 16
  • 33
5
votes
1 answer

How can I add a testId attribute to a React Native component for Testing Library when TypeScript prevents me?

I'm writing a React Native components using TypeScript and testing them with React Native Testing Library. I want to put a testId attribute on a React Native component like so: And then refer to it in a test like…
Rap
  • 6,851
  • 3
  • 50
  • 88
1
2 3
11 12