Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ ๐Ÿงช How to set up Jest & React Native Testing Library in your Expo App! ๐Ÿ’ฅ

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š ๐Ÿงช How to set up Jest & React Native Testing Library in your Expo App! ๐Ÿ’ฅ


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

If you've used React Testing Library in a regular React project before then the React Native version will already seem familiar, however getting everything setup and configured is usually the trickiest part!

What we'll be using:

Prerequisites

  • A React Native Expo project.

Create a new one if you don't have one to work on already. See the Expo docs on creating a new project)

Installing React Native Testing Library.

Go ahead and install React Native Testing Library. I'm using npx expo install since I'm using Expo:

npx expo install @testing-library/react-native -- --save-dev

Installing react-test-renderer

We'll also need to install react-test-renderer, as React Native Testing Library uses it as a dependency.

IMPORTANT: Before you install it, look in your package.json and check what version of react you are using. You need to install the same version of react-test-renderer for compatibility. For example, I'm using "react": "18.1.0" - Therefore I need to install "react-test-renderer": "18.1.0":

npx expo install [email protected]

Installing Jest

Finally, go ahead and follow the instructions to install jest here.
Be sure to add the configuration to your package.json

Test Examples

//App.test.js

import renderer from "react-test-renderer";
import { render } from "@testing-library/react-native";


describe("<App />", () => {
    it("has 1 child", () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree.children.length).toBe(1);
    });

    it("renders correctly", () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it("renders Hello World message on the home page", async () => {
        render(<App />);
        expect(screen.getByText("Hello, World!")).toBeDefined()
    });
});

// NOTE: You can use either:
// renderer.create(<App />) from  "react-test-renderer"
// or render(<App />) from "@testing-library/react-native"

The above tests are based on a super simple app with only one child. If you have a more complex app with additional libraries, then there may be more setup required, and I will go into these scenarios in more detail in future articles.

Please feel free to comment anything useful or interesting you've found when setting up testing on your Expo project.

Happy testing!

...



๐Ÿ“Œ ๐Ÿงช How to set up Jest & React Native Testing Library in your Expo App! ๐Ÿ’ฅ


๐Ÿ“ˆ 89.08 Punkte

๐Ÿ“Œ Effortless Testing Setup for React with Vite, TypeScript, Jest, and React Testing Library


๐Ÿ“ˆ 63.36 Punkte

๐Ÿ“Œ This Week In React #146: Concurrency, Server Components, Next.js, React-Query, Remix, Expo Router, Skia, React-Native...


๐Ÿ“ˆ 53.42 Punkte

๐Ÿ“Œ Building a Modern Document Website for React Native Library Like React Native ECharts


๐Ÿ“ˆ 44.45 Punkte

๐Ÿ“Œ This Week In React #131: useReducer, Controlled Inputs, Async React, DevTools, React-Query, Storybook, Remix, RN , Expo...


๐Ÿ“ˆ 44.38 Punkte

๐Ÿ“Œ This Week In React #142: React-Query, Million, OpenNext, Ariakit, Expo-Image, React-Three-Fiber, TS 5.1, Node.js 20, WebGPU...


๐Ÿ“ˆ 44.38 Punkte

๐Ÿ“Œ Simplifying jest stubs using jest-when


๐Ÿ“ˆ 44.01 Punkte

๐Ÿ“Œ BUILD YOUR FIRST APP WITH REACT NATIVE AND EXPO


๐Ÿ“ˆ 41.61 Punkte

๐Ÿ“Œ How to Add Tailwind CSS to Your React Native Expo App


๐Ÿ“ˆ 41.61 Punkte

๐Ÿ“Œ Beginner Guide on Unit Testing in React using React Testing Library and Vitest


๐Ÿ“ˆ 41.35 Punkte

๐Ÿ“Œ Introduction to Testing React Components with Vite, Vitest and React Testing Library


๐Ÿ“ˆ 41.35 Punkte

๐Ÿ“Œ How to Test Your React App Effectively with React Testing Library


๐Ÿ“ˆ 40.44 Punkte

๐Ÿ“Œ ๐Ÿ‘จ๐Ÿผโ€๐Ÿ’ป Building a news app with React Native, Expo Router, and Tanstack Query ๐Ÿ“ฐ


๐Ÿ“ˆ 38.09 Punkte

๐Ÿ“Œ How to Save and Play Audio in React Native Expo App


๐Ÿ“ˆ 38.09 Punkte

๐Ÿ“Œ Testing: Code Intelligence integriert Fuzz-Testing in Jest


๐Ÿ“ˆ 36.98 Punkte

๐Ÿ“Œ This Week In React #139: React.dev, Remix, Server Components, Error Boundary, Wakuwork, React-Native, Bottom Sheet...


๐Ÿ“ˆ 36.62 Punkte

๐Ÿ“Œ The State of React Native Tooling (React Native CLI - The Ultimate Guide)


๐Ÿ“ˆ 36.47 Punkte

๐Ÿ“Œ React Native Networkingย โ€“ How To Perform API Requests In React Native using the FetchAPI


๐Ÿ“ˆ 36.47 Punkte

๐Ÿ“Œ How to Manage State in React and React Native with the PullState Library


๐Ÿ“ˆ 35.41 Punkte

๐Ÿ“Œ This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX...


๐Ÿ“ˆ 35.18 Punkte

๐Ÿ“Œ This Week In React #141: Next.js, Storybook, React Visualized, Remix, Chakra, Modern.js, Reselect, Benchmarks, Expo...


๐Ÿ“ˆ 35.18 Punkte

๐Ÿ“Œ This Week In React #164: Next.js, Remix, RSCs, React-Forget, MDX, Expo Orbit, Ignite, Victory XL, Reanimated, TypeScript...


๐Ÿ“ˆ 35.18 Punkte

๐Ÿ“Œ This Week In React #171: Expo, Next.js, React-Email, Storybook, TypeScript, Vocs, Skottie, Harmony, VisionOS...


๐Ÿ“ˆ 35.18 Punkte

๐Ÿ“Œ This Week In React #174: ReactLabs, React-Strict-DOM, Remix, RNGH, Expo, RN+TV, TC39, Vite...


๐Ÿ“ˆ 35.18 Punkte

๐Ÿ“Œ Initialize A React Native And Expo CLI Project


๐Ÿ“ˆ 35.03 Punkte

๐Ÿ“Œ Implement TikTok-like Feed Using React Native Expo


๐Ÿ“ˆ 35.03 Punkte

๐Ÿ“Œ Fluxo de autenticaรงรฃo no React Native usando Expo Router


๐Ÿ“ˆ 35.03 Punkte

๐Ÿ“Œ How to integrate AWS Real-time transcription using expo-av react native android


๐Ÿ“ˆ 35.03 Punkte

๐Ÿ“Œ React Testing Library Tutorial โ€“ How to Write Unit Tests for React Apps


๐Ÿ“ˆ 33.86 Punkte

๐Ÿ“Œ Jest Mastery: Elevating Your Testing Skills with Proven Best Practices


๐Ÿ“ˆ 33.01 Punkte

๐Ÿ“Œ How to Set Up React Testing Library With Next.js โ€“ A Step-by-Step Guide


๐Ÿ“ˆ 32.31 Punkte

๐Ÿ“Œ Testing React apps with Testing library


๐Ÿ“ˆ 32.16 Punkte

๐Ÿ“Œ Facebook Relents, Switches React, Flow, Immuable.js and Jest To MIT License


๐Ÿ“ˆ 31.2 Punkte

๐Ÿ“Œ heise+ | JavaScript: Testen mit React-Tools wie Cypress und Jest


๐Ÿ“ˆ 31.2 Punkte

๐Ÿ“Œ Minimal setup for Vite, React and Jest Integration


๐Ÿ“ˆ 31.2 Punkte











matomo