{"id":18402329,"url":"https://github.com/rjanjua/fructose","last_synced_at":"2025-04-07T07:32:11.131Z","repository":{"id":88732307,"uuid":"94453003","full_name":"rjanjua/fructose","owner":"rjanjua","description":"React Native Components - Functional Testing ","archived":false,"fork":false,"pushed_at":"2017-07-21T14:48:18.000Z","size":455,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T14:34:49.545Z","etag":null,"topics":["detox","fructose","functional-testing","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rjanjua.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-15T15:26:07.000Z","updated_at":"2020-02-27T20:19:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"afd29b73-d501-4f64-80ed-accd9efb65ff","html_url":"https://github.com/rjanjua/fructose","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanjua%2Ffructose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanjua%2Ffructose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanjua%2Ffructose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanjua%2Ffructose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rjanjua","download_url":"https://codeload.github.com/rjanjua/fructose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247612315,"owners_count":20966718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["detox","fructose","functional-testing","react-native"],"created_at":"2024-11-06T02:42:12.006Z","updated_at":"2025-04-07T07:32:11.119Z","avatar_url":"https://github.com/rjanjua.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fructose\n\nFructose is a library to enable functional testing of React Native components in a device or simulator. It allows you to create functional tests against React Native components in isolation. This is different to an end to end testing approach where you test a built application.\n\nFructose uses [detox] under the hood as the driver for ios devices.\n\nFructose can technically support both Android and iOS. At the moment it is limited by [detox] to iOS. Once [detox] has Android support, so will fructose.\n\n---\n\n## Overview\n\nFructose has 2 main parts to it. \n  - Fructose App\n  - Fructose Test Utils\n\nYou need to use both to create and run a fructose test.\n\nThe App component is a React component that sits within an index.ios.js/index.android.js and forms the basis for your test application. It uses a websocket to listen for commands to load in a new component.\n\nThe Test Utils enable tests to load components inside the app, and they also enable interaction with the app through [detox].\n\n## Getting Started\n\n### Install\n\n```\nyarn add fructose --dev\nyarn add react-native-storybook-loader --dev\n```\n\n### Set up the app\n\nCreate a folder `.fructose` in your project root directory.\n\nAdd an `index.ios.js` in this folder with the following content - register the component to the same name as the one your app binary expects. For example, if you are using the storybook app:\n\n```\nimport { AppRegistry } from \"react-native\";\nimport Fructose from \"fructose\";\nimport { loadStories } from './components';\n\nAppRegistry.registerComponent(\"storybooknative\", () =\u003e Fructose(loadStories));\n```\n\n### Set up the tests\n\nNext add a setup file for your test runner in the same folder with the following content:\n\n```\nimport setup from 'fructose/setup';\nimport config from '../package';\nsetup(config.fructose);\n```\n\nYou will need to require this file at the beginning of your test run. For example, if you are using jest add this to your package.json:\n\n```\n\t\"jest\": {\n\t\t\"setupTestFrameworkScriptFile\": \"./.fructose/setup.js\"\n\t}\n```\n\nYou will also need to add a `fructose` config to your package.json with an attribute binaryPath that points to a React Native app, for example if you are using storybooks, you can set binaryPath to the location of the storybook binary:\n\n```\n\t\"fructose\": {\n\t\t\"binaryPath\": \"ios/build/Build/Products/Debug-iphonesimulator/storybooksnative.app\"\n\t}\n```\n\nAdd a script to your package.json: \n\n```\n  \"run-fructose-tests\": \"npm run write-test-components \u0026\u0026 jest .fructose/components.test.js --forceExit --verbose\"\n```\n\n### Create the pretest hooks\n\nIf you need further information you can refer to packages/e2eTests for an example project setup.\n\nAdd the following to your package.json:\n\n```\n\"scripts\": {\n  \"fructose-app\": \"react-native start --root .fructose --resetCache\",\n  \"compile-components\": \"rnstl --searchDir ./ --pattern '**/*.fructose.js' --outputFile ./.fructose/components.js\",\n  \"write-test-components\": \"npm run compile-components  \u0026\u0026 compile-tests\"\n}\n```\n\n## Writing tests\n\nYour test files should be named to match this glob: `*.fructose.test.js`.\n\nAt this moment in time this is not configurable, though we can add the functionality if there is a demand for it.\n\nTests can be written as follows:\n```\nimport React from 'react';\nimport { MyComponent } from './my-component';\n\nwithComponent(\u003cMyComponent\u003eThe Philosopher's Stone\u003c/MyComponent\u003e, 'description', () =\u003e {\n  test('test description', async () =\u003e {\n    await expect(element(by.text(`The Philosopher's Stone`))).toBeVisible();\n  });\n});\n```\n\nThe first interesting thing to note here is the 'withComponent' function. This function has two purposes.\n\nWhen run in the context of the application, it loads up the component (first argument) into the app.\n\nWhen run in the context of the tests, it sends a message to the app to load up the component.\n\nThe second and third arguments are only used in the context of the tests. The second argument is simply a description that you might put into a 'describe' block, the third is a function that contains your tests. At the moment the tests need to be written in a test framework that supports the functions `beforeAll`,`afterAll`, `beforeEach`, `afterEach`, `describe`. We have only tested it with jest.\n\nIf you want to understand [expect][expect], [element][actions], and [by][matchers], take a look at the [Detox documentation][detox-docs].\n\n## Future\n  \n  1. Remove as much of the configuration currently needed as possible \n  2. Make Fructose test runner agnostic.\n  3. A Cli to help get started with fructose.\n\n[detox]: https://github.com/wix/detox\n[detox-docs]: https://github.com/wix/detox/blob/master/docs/README.md\n[matchers]: https://github.com/wix/detox/blob/master/docs/APIRef.Matchers.md\n[actions]: https://github.com/wix/detox/blob/master/docs/APIRef.ActionsOnElement.md\n[expect]: https://github.com/wix/detox/blob/master/docs/APIRef.Expect.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjanjua%2Ffructose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frjanjua%2Ffructose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjanjua%2Ffructose/lists"}