Testing in React Native — Jest & Detox – Pillow.codes

Testing in React Native  with  Jest & Detox



#ReactJS #Jest

  • Testing can help identify bugs introduced during the development phase of the app and addressing these bugs before release means that your users will always get to use a reliable product.What kind of tests can we use?Unit tests are used to test small modular pieces of code (aka units) independently.Integration tests…
  • One of my favorite things about Jest is a feature called Snapshot testing.Snapshot tests are a very useful tool whenever you want to make sure the UI for a component or the object from an redux action or reducer does not change unexpectedly.Here’s a good explanation of what a snapshot…
  • Here’s a simple example on how to set this up.Jest tests for Pillow Pro appE2E tests: DetoxAn end-to-end test emulates a user by finding and interacting with pieces of UI in your app in a production/release environment.Detox is a gray box E2E Tests and Automation Library for Mobile Apps built by WixWe…
  • Here’s how we handle them in Detox:LoginHere’s a simple example of what a detox test for logging into the app might look like:DemoAnd finally, here’s a part of our E2E test suite in action.
  • Also, automating the tests on Bitrise CI has helped us streamline our release pipeline by preceding every release with the tests workflow.Hopefully, this post details how easy it is to test a React Native app and automate the testing process as well.

At Pillow, we release an update to our Pillow Pro app (iOS & Android) every 2 weeks or so. Most releases are over-the-air (OTA) updates that are done using CodePush, and are fully automated with…
Continue reading “Testing in React Native — Jest & Detox – Pillow.codes”

Jest and the Component Driven Development (CDD) – Comunidad JS – Medium

#Jest and the Component Driven Development (CDD):  #ReactJS #JavaScript

  • Jest and the Component Driven Development (CDD)Testing React and React Native applications.We all knows about TDD right ?
  • I recently discovered other flow/flavor around React Components and Jest snapshot testing that makes me more happy and encourage me to write more tests.This approach makes the dev process a bit more fun that the other way around.
  • Then, when you´re confortable with your component code base and you have applied all the good practices out there, write the actual test, passing the required props to the component being tested and expect it to match the snapshot.Snapshot testingSnapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.The above statement, is from the Jest documentation, and it´s 100% true.
  • I’ve found snapshot testing to be a quick and fun way to test Components and make sure your UI does not change unexpectedly, which is a good thing.The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.That means we are not passing the expected props to our component in some parts of our application or we have adjusted the component (because we´ve refactored it).
  • So either one or the other possibility, we need to update the test snapshot (If we´ve refactored it) executing in the terminal yarn test -u or go and fix the part in the application where we´re not using the component as we expect.Having a test coverage between 80 and 100% make us more confidents when we need to deploy to any environment and allows applications to be more robust and easy to scale.In closing, I really encourage React developers to use Jest for testing applications.

We all knows about TDD right ? Test Driven Development.
The philosophy behind it, is to start the development cycle with first writing a failing test and then writing the actual function, to make it…
Continue reading “Jest and the Component Driven Development (CDD) – Comunidad JS – Medium”

Guest Post: Automatically Deploy Pull Requests for Create React Native App and Expo Projects

  • TL;DR;appr builds and deploys pull requests in your create-react-native-app and Expo-based projects, and posts a link and a QR code to your PR, so you can run the app on your device or emulator in seconds!Great teams review their codeI’m sure you’ll agree: Code reviews are a useful tool in a development team’s workflow.
  • You wouldn’t release code to production without having another pair of eyes on it first, would you?Thankfully, GitHub makes code reviews simple.
  • Netlify offers the same functionality for deploying static front end sites.Sadly, this one-click workflow hasn’t been available to mobile developers without setting up complex build and deployment pipelines, and even then, installing an app to be able to test a simple change still takes way too long.Inspired by Expo Sketch, I wanted to see if it would be possible to set up review apps for React Native.Introducing apprAppr is a script that deploys pull requests in your project to Expo, and posts a link and a QR code to your PR.
  • Point your Expo app camera to the QR code and the review app will launch on your device.
  • Switching to your preferred CI should be easy, and PRs to add support are welcome!To make testing your pull requests easy, head to FormidableLabs/appr on GitHub and follow the simple Getting started guide to add appr to your project!

Jani builds React Native apps at Formidable, a Seattle/London-based consultancy and open-source shop. You can follow him on Twitter as @jevakallio. appr builds and deploys pull requests in your…
Continue reading “Guest Post: Automatically Deploy Pull Requests for Create React Native App and Expo Projects”