Giter VIP home page Giter VIP logo

react-native-testing's Introduction

banner

No More Hacks and Headaches <> Learn How to Test Your Components Before Your Users Will

Quality Gate Status Coverage Unit Testing E2E Testing

Covered Examples 🎞

Tools in use πŸ› οΈ

Setup and requirements πŸ“‹

Getting Started πŸš€

  • Clone the repo git clone [email protected]:vanGalilea/react-native-testing.git
  • Run yarn to install dependencies
  • Explore RN CLI app and/or Expo app's tests and source code that are relevant to your use case.

RN CLI application

How to run the tests πŸƒβ€β™€οΈ

  • Run cd apps/rn-cli-app to navigate to the app folder
  • Run yarn test:unit to run the unit tests
  • Run yarn test:unit:dev to run the unit tests in dev/watch mode
  • Run yarn test:unit:coverage to run the tests and generate a coverage report

Make sure you have built and run the app in dev mode before running the e2e tests.

  • Run yarn test:e2e to run the e2e tests
  • Run yarn test:e2e:dev to run the e2e tests in dev/watch mode
  • Run yarn test:e2e:record to run the e2e tests and record a video of the tests

How to run the app πŸ“±

  • Run cd apps/rn-cli-app to navigate to the app folder
  • Run npx pod-install to install iOS dependencies
  • Run yarn start to start the metro bundler
  • Click i to run the app on iOS simulator or a to run it on Android emulator

Expo application

How to run the tests πŸƒβ€β™€οΈ

  • Run cd apps/rn-expo-app to navigate to the app folder
  • Run yarn test:unit to run the unit tests

How to run the app πŸ“±

  • Run cd apps/rn-expo-app to navigate to the app folder
  • Run yarn start to start the metro bundler
  • Click i to run the app on iOS simulator or a to run it on Android emulator

Inspiration, resources and further reading πŸ“š

Impression of the project πŸ“Έ

maestro-record.mp4

react-native-testing's People

Contributors

dependabot[bot] avatar hsavit1 avatar kamaal111 avatar pietgk avatar santhoshvai avatar vangalilea avatar wmcbain avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-testing's Issues

Initials tests fails in current repo (2022-03)

This project looks awesome. Tried to implement it in my own project with inspiration from this repo. After some time of debugging I decided to run tests in this repo:

first time I run it:

❯ yarn test
yarn run v1.22.17
$ jest
 PASS  __tests__/ListWithFetch.test.tsx (11.019 s)
 PASS  __tests__/Counter.test.tsx (15.144 s)
 PASS  __tests__/CounterUsesCustomHook.test.tsx (15.282 s)
 FAIL  __tests__/LoginSubmission.test.tsx (15.342 s)
  ● renders correctly

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      24 | })
      25 |
    > 26 | it('renders correctly', async () => {
         | ^
      27 |   const mockNavigate = jest.fn()
      28 |   // @ts-ignore
      29 |   useNavigation.mockImplementation(() => ({navigate: mockNavigate}))

      at Object.<anonymous> (__tests__/LoginSubmission.test.tsx:26:1)

 FAIL  __tests__/Login.test.tsx (15.305 s)
  ● renders correctly

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

       5 | import {expect, it, jest} from '@jest/globals'
       6 |
    >  7 | it('renders correctly', async () => {
         | ^
       8 |   const username = 'hi'
       9 |   const password = 'qwerty1234'
      10 |   let submittedData = {}

      at Object.<anonymous> (__tests__/Login.test.tsx:7:1)

 FAIL  __tests__/Video.test.tsx (15.456 s)
  ● renders/navigates throughout app screens

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      11 | }
      12 |
    > 13 | it('renders/navigates throughout app screens', async () => {
         | ^
      14 |   const {getByText, getByA11yLabel} = render(
      15 |     <Video navigation={navigationMock} />,
      16 |   )

      at Object.<anonymous> (__tests__/Video.test.tsx:13:1)

 PASS  __tests__/EasyButton.test.tsx (16.765 s)
 FAIL  __tests__/FlatList.test.tsx (16.827 s)
  ● scrolls to top and refreshes all items

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      30 | }
      31 |
    > 32 | it('scrolls to top and refreshes all items', async () => {
         | ^
      33 |   const {getByText, getByTestId} = render(<SectionList />)
      34 |
      35 |   getByText(/pizza/i)

      at Object.<anonymous> (__tests__/FlatList.test.tsx:32:1)


ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From __tests__/FlatList.test.tsx.

      at getNodeByText (node_modules/@testing-library/react-native/build/helpers/byText.js:53:9)
      at node_modules/@testing-library/react-native/build/helpers/byText.js:73:44
      at _findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17085:7)
      at ReactTestInstance.findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17012:12)
      at queryAllByTextFn (node_modules/@testing-library/react-native/build/helpers/byText.js:73:28)
 PASS  __tests__/Home.test.tsx (16.983 s)
 FAIL  __tests__/Modal.test.tsx (17.271 s)
  ● renders modal screen correctly

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      14 | })
      15 |
    > 16 | it('renders modal screen correctly', async () => {
         | ^
      17 |   const {getByText} = render(<ModalScreen />)
      18 |
      19 |   expect(() => getByText(/hello world/i)).toThrow(

      at Object.<anonymous> (__tests__/Modal.test.tsx:16:1)


ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From __tests__/Modal.test.tsx.

      at getNodeByText (node_modules/@testing-library/react-native/build/helpers/byText.js:53:9)
      at node_modules/@testing-library/react-native/build/helpers/byText.js:73:44
      at _findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17085:7)
      at ReactTestInstance.findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17012:12)
      at queryAllByTextFn (node_modules/@testing-library/react-native/build/helpers/byText.js:73:28)
A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks.
Test Suites: 5 failed, 5 passed, 10 total
Tests:       5 failed, 11 passed, 16 total
Snapshots:   1 passed, 1 total
Time:        18.333 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

second time I run it

Screenshot 2022-03-09 at 10 43 44

I'm quite confused now πŸ€”

FEATURE: Modal Test

If possible, can you add a sample test for using a react-native modal. I would like to test the modal being closed at the start, then clicking a button opens it before going further and I cannot figure out how to do this.

[feat. req] Provide an example of how to mock React Native Async Storage with react-native-testing

I am using your library to store data in my React Native app. I want to test my app with Jest, but I am having trouble mocking the Async Storage module. I have read the official documentation on testing with mock, but I still don’t understand how to set up the mock and use it in my tests.

The only example I found online is mock-async-storage, but it is 5 years old and not react-native-testing.
I would really appreciate it if you could provide a simple and up-to-date example of how to mock React Native Async Storage with Jest in your repository. This would help me and other users who want to test their apps with your library.

Thank you for your time and effort.

msw + maestro

Great examples on how to get into the testing world πŸ’ͺ🏼 , i just have a question, would it be possible (and even make sense) to use msw with maestro to decouple the server and confirm that views are displayed as expected

Add Storybook

Add Storybook to show case development in isolation

home test is brokwn

first off, thank you for this library. it's current the best example of react native testing on the internet.

unfortunately, not all tests are working. this is the output I got from the home test

 FAIL  __tests__/Home-test.tsx
  ● Console

    console.error
      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

       9 | 
      10 | it('renders/navigats throughout app screens', async () => {
    > 11 |   const {getByText} = render(<App />)
         |                              ^
      12 |   const homeText = getByText(/home/i)
      13 |   expect(homeText).not.toBeNull()
      14 |   fireEvent.press(getByText(/counter/i))

      at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:33:14)
      at registerError (node_modules/react-native/Libraries/YellowBox/YellowBox.js:197:7)
      at errorImpl (node_modules/react-native/Libraries/YellowBox/YellowBox.js:84:22)
      at BufferedConsole.console.error (node_modules/react-native/Libraries/YellowBox/YellowBox.js:63:14)
      at printWarning (node_modules/react/cjs/react.development.js:315:30)
      at error (node_modules/react/cjs/react.development.js:287:5)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
      at _callee$ (__tests__/Home-test.tsx:11:30)

    console.error
      The above error occurred in the <View> component:
          in View (created by View)
          in View (created by AppContainer)
          in View (created by View)
          in View (created by AppContainer)
          in AppContainer (at src/index.js:26)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

      at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:33:14)
      at registerError (node_modules/react-native/Libraries/YellowBox/YellowBox.js:169:7)
      at errorImpl (node_modules/react-native/Libraries/YellowBox/YellowBox.js:84:22)
      at BufferedConsole.console.error (node_modules/react-native/Libraries/YellowBox/YellowBox.js:63:14)
      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.