{"action":"created","comment":{"url":"https://api.github.com/repos/teambit/docs/pulls/comments/146805270","pull_request_review_id":71789548,"id":146805270,"diff_hunk":"@@ -0,0 +1,262 @@\n+# Building & testing React components with Bit:\n+\n+Bit allows people to share code easily across repos and projects, through small, composable components.\n+\n+## Before we start:\n+\n+### What we'll be learning:\n+\n+React is a rising star in the front-end world. It’s known for it’s ease in separation of components, and as such, is perfect for combining with Bit.\n+\n+In the following tutorial, we’ll see how easy it is to export a single React component from your project and re-use it in a different project - all using Bit!\n+We’ve created an example project containing two folders, both created with the `create-react-app` package. Each folder represents an individual project. We would like to share a single React component, along with its test file, between these projects. The first project, called `export-button`, has a button.js component and a test file - button.test.js. We would like to share these files with the second project, called `import-button`, all through Bit.  \n+\n+In this tutorial we'll continue where we left off in the [last tutorial](https://github.com/teambit/docs/blob/master/react-tutorial.md), only this time we'll add unit tests, along with building and testing environments supplied by Bit.\n+\n+Before we dive in, we'll talk about Bit environments:  \n+Bit has multiple compiling and testing environments that you can use to run your components. All environments are hosted on Bitsrc as Bit components, and are available for you to import into your project( you can find them all [here](https://bitsrc.io/bit/envs).  \n+There are two important flags that you need to know about when using the environments, -c and -t. These flags tell Bit to import them as an environment and not as a separate component. In this tutorial we'll cover these environments and how to use them correctly.\n+\n+## Prerequisites:\n+\n+We’ll assume some familiarity with JavaScript and React, although they will be used only at the end of the tutorial, in order to render the React component we will be sharing between the projects.\n+\n+Before starting this tutorial:  \n+ - [Install Bit](https://docs.bitsrc.io/en/article/install-bit) on your computer.  \n+ - Sign in to [Bitsrc](https://bitsrc.io) and authenticate your SSH key pair to your Bitsrc account.  \n+ - This tutorial relies heavily on the [previous tutorial](https://github.com/teambit/docs/blob/master/react-tutorial.md). For a better understanding of Bit, make sure you start from the first tutorial. \n+\n+## Getting started:\n+\n+We can update the same component we used in the last tutorial, this way we don't have to start over, just update the version of our component. \n+\n+## Part 1: Add environments and re-export your React component:\n+\n+### Importing the relevant environments\n+\n+If we look at our example project, we can see that we are using `Jest` as our testing tool and we also need a compiler for `React`. Let’s import these environments and start using them:\n+\n+```js\n+$ bit import bit.envs/compilers/react -c\n+\n+the following component environments were installed\n+- bit.envs/compilers/react@5\n+```\n+```js\n+$ bit import bit.envs/testers/jest -t\n+\n+the following component environments were installed\n+- bit.envs/testers/jest@18\n+```\n+\n+After importing the environments, run bit status:\n+\n+```js\n+$ bit status\n+\n+no new components\n+\n+--------------------------\n+\n+modified components\n+    > ui/button... ok\n+\n+--------------------------\n+\n+no staged components\n+```\n+\n+You can see that the component was moved to the “modified” area. The reason for this is that bit has added the environments in the background. Now that we have all the environments set up we can go to work.\n+\n+### Adding tests to Bit:\n+\n+If you look through the `export-button` project, you can see that the test file is located inside the `src/ui` folder for reasons of comfort, but Bit can run tests located anywhere in your project - just specify the path!  \n+\n+We'll start by adding the test to your component:\n+\n+```sh\n+$ bit add src/ui/button.js -t src/ui/button-test.js\n+\n+tracking component ui/button:\n+added src/ui/button.js\n+added src/ui/button-test.js\n+```\n+\n+If you run bit status you will see that the component stayed in the modified area. If you want to see a more in-depth view of a component you can use the `bit show` command:\n+\n+```js\n+$ bit show ui/button\n+\n+  ┌───────────────────┬─────────────────────────────────────────────────────────────────────┐\n+  │        ID         │                             ui/button@1                             │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │     Compiler      │                     bit.envs/compilers/react@5                      │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │      Tester       │                      bit.envs/testers/jest@18                       │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │     Language      │                             javascript                              │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │     Main File     │                          src/ui/button.js                           │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │     Packages      │           prop-types@^15.6.0,react@^16.0.0,enzyme@^3.1.0            │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │       Files       │                          src/ui/button.js                           │\n+  ├───────────────────┼─────────────────────────────────────────────────────────────────────┤\n+  │       Specs       │                        src/ui/button.test.js                        │\n+  └───────────────────┴─────────────────────────────────────────────────────────────────────┘\n+Documentation\n+┌────────────────────┬──────────────────────────────────────────────────┐\n+│ Description        │ Styled button component                          │\n+├────────────────────┼──────────────────────────────────────────────────┤\n+│ Args               │ ()                                               │\n+├────────────────────┼──────────────────────────────────────────────────┤\n+│ Returns            │                                                  │\n+└────────────────────┴──────────────────────────────────────────────────┘\n+Examples\n+\n+<Button text=\"Example button text\" buttonColor=\"red\" buttonHoverColor=\"green\" />\n+```\n+Now let's build using the compiler we imported from Bit:\n+\n+```sh\n+$ bit build\n+\n+ui/button\n+/home/oded/code/react-tutorial/export-button/dist/src/ui/button.js.map\n+/home/oded/code/react-tutorial/export-button/dist/src/ui/button.js\n+/home/oded/code/react-tutorial/export-button/dist/src/ui/button.test.js.map\n+/home/oded/code/react-tutorial/export-button/dist/src/ui/button.test.js\n+```\n+\n+At the moment, compiling and building the `dist` files don't have any value as we are working against the `src` files, but this step can be crucial for running your tests. More on this issue later...\n+\n+\n+Now that we added the test we can see them run on Bit with our test environment:\n+\n+```sh\n+$ bit test ui/button\n+\n+ui/button\n+tests passed\n+file: /home/oded/code/react-tutorial/export-button/dist/src/ui/button.test.js\n+total duration - 895ms\n+\n+✔   Button shows example text - 895ms\n+✔   Button changes text on click - 895ms\n+```\n+\n+Now lets lock our version to save the changes we've made:\n+\n+```sh\n+$ bit tag -m \"added tests\" /ui/button\n+\n+1 components tagged | 0 added, 1 changed\n+\n+changed components:  odedreuveny.example/ui/button@2\n+```\n+It should be noted that when you run `bit tag`, Bit compiles and runs any tests you have by default, so any failing tests or compilation errors you might have would be called out at this point.\n+\n+Now that we can update our remote scope with the environments and tests we've just added.\n+\n+```sh\n+bit export odedreuveny.example\n+\n+exported 1 components to scope odedreuveny.example\n+```\n+Now that the changes we've made were updated in the remote scope we should be able to see our tests pass on the our scope in Bitsrc. Go check it out!\n+\n+Of course, we can also see our local scope from the terminal as well:\n+\n+```sh\n+$ bit list\n+\n+found 3 components in local scope\n+┌──────────────────────────────────────────────┬─────────┐\n+│ ID                                           │ Version │\n+├──────────────────────────────────────────────┼─────────┤\n+│ ui/button                                    │ 2       │\n+├──────────────────────────────────────────────┼─────────┤\n+│ testers/jest                                 │ 18      │\n+├──────────────────────────────────────────────┼─────────┤\n+│ compilers/react                              │ 5       │\n+└──────────────────────────────────────────────┴─────────┘\n+```\n+\n+We can see that the version of our `ui/button` component has incremented by 1, as well as the environments we're working with in our project.\n+\n+\n+## Part 2: Import your updated React component\n+\n+In the following section we will use the updated React component you just exported, and use it to update the component in the `import-button` project you have within the example project.\n+\n+\n+### Import the React component to your `import-button` project\n+\n+In your terminal, move to the `import-button` project:\n+\n+```sh\n+$ cd ../import-button # Move into the import-button folder\n+```\n+\n+Now let's update our component by re-importing the component:\n+\n+```sh\n+bit import oded.example/ui/button\n+\n+successfully imported one component\n+- oded.example/ui/button@2\n+\n+error - missing the following package dependencies. please install and add to package.json.\n+> enzyme: ^3.1.0\n+\n+warning - add the following packages to package.json\n+> prop-types: ^15.6.0\n+```\n+\n+Now we can see that we're missing a few packages in our `import-button` project. Let's install them now:","path":"react-envs-tutorial.md","position":216,"original_position":216,"commit_id":"a7323d0be6c9b3f7cea203d037372f7b1527f7a3","original_commit_id":"a7323d0be6c9b3f7cea203d037372f7b1527f7a3","user":{"login":"itaymendel","id":4623056,"avatar_url":"https://avatars0.githubusercontent.com/u/4623056?v=4","gravatar_id":"","url":"https://api.github.com/users/itaymendel","html_url":"https://github.com/itaymendel","followers_url":"https://api.github.com/users/itaymendel/followers","following_url":"https://api.github.com/users/itaymendel/following{/other_user}","gists_url":"https://api.github.com/users/itaymendel/gists{/gist_id}","starred_url":"https://api.github.com/users/itaymendel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/itaymendel/subscriptions","organizations_url":"https://api.github.com/users/itaymendel/orgs","repos_url":"https://api.github.com/users/itaymendel/repos","events_url":"https://api.github.com/users/itaymendel/events{/privacy}","received_events_url":"https://api.github.com/users/itaymendel/received_events","type":"User","site_admin":false},"body":"'Bit checks the project's `package.json`, and compare it to the component package dependencies. If it finds a missing dependency, it will let you know, and ask you to add that dependency to the project.'\r\n\r\nwe need to explain the behavior...","created_at":"2017-10-25T09:49:00Z","updated_at":"2017-10-25T09:53:57Z","html_url":"https://github.com/teambit/docs/pull/5#discussion_r146805270","pull_request_url":"https://api.github.com/repos/teambit/docs/pulls/5","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/teambit/docs/pulls/comments/146805270"},"html":{"href":"https://github.com/teambit/docs/pull/5#discussion_r146805270"},"pull_request":{"href":"https://api.github.com/repos/teambit/docs/pulls/5"}}},"pull_request":{"url":"https://api.github.com/repos/teambit/docs/pulls/5","id":148609630,"html_url":"https://github.com/teambit/docs/pull/5","diff_url":"https://github.com/teambit/docs/pull/5.diff","patch_url":"https://github.com/teambit/docs/pull/5.patch","issue_url":"https://api.github.com/repos/teambit/docs/issues/5","number":5,"state":"open","locked":false,"title":"react envs tutorial - initial commit","user":{"login":"odedre","id":15064762,"avatar_url":"https://avatars2.githubusercontent.com/u/15064762?v=4","gravatar_id":"","url":"https://api.github.com/users/odedre","html_url":"https://github.com/odedre","followers_url":"https://api.github.com/users/odedre/followers","following_url":"https://api.github.com/users/odedre/following{/other_user}","gists_url":"https://api.github.com/users/odedre/gists{/gist_id}","starred_url":"https://api.github.com/users/odedre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/odedre/subscriptions","organizations_url":"https://api.github.com/users/odedre/orgs","repos_url":"https://api.github.com/users/odedre/repos","events_url":"https://api.github.com/users/odedre/events{/privacy}","received_events_url":"https://api.github.com/users/odedre/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-10-25T09:09:02Z","updated_at":"2017-10-25T09:53:57Z","closed_at":null,"merged_at":null,"merge_commit_sha":"72e8fb8baaa24697c675c1444102f13e6795e7d4","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/teambit/docs/pulls/5/commits","review_comments_url":"https://api.github.com/repos/teambit/docs/pulls/5/comments","review_comment_url":"https://api.github.com/repos/teambit/docs/pulls/comments{/number}","comments_url":"https://api.github.com/repos/teambit/docs/issues/5/comments","statuses_url":"https://api.github.com/repos/teambit/docs/statuses/a7323d0be6c9b3f7cea203d037372f7b1527f7a3","head":{"label":"teambit:react-envs-tutorial","ref":"react-envs-tutorial","sha":"a7323d0be6c9b3f7cea203d037372f7b1527f7a3","user":{"login":"teambit","id":24789812,"avatar_url":"https://avatars1.githubusercontent.com/u/24789812?v=4","gravatar_id":"","url":"https://api.github.com/users/teambit","html_url":"https://github.com/teambit","followers_url":"https://api.github.com/users/teambit/followers","following_url":"https://api.github.com/users/teambit/following{/other_user}","gists_url":"https://api.github.com/users/teambit/gists{/gist_id}","starred_url":"https://api.github.com/users/teambit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/teambit/subscriptions","organizations_url":"https://api.github.com/users/teambit/orgs","repos_url":"https://api.github.com/users/teambit/repos","events_url":"https://api.github.com/users/teambit/events{/privacy}","received_events_url":"https://api.github.com/users/teambit/received_events","type":"Organization","site_admin":false},"repo":{"id":107522953,"name":"docs","full_name":"teambit/docs","owner":{"login":"teambit","id":24789812,"avatar_url":"https://avatars1.githubusercontent.com/u/24789812?v=4","gravatar_id":"","url":"https://api.github.com/users/teambit","html_url":"https://github.com/teambit","followers_url":"https://api.github.com/users/teambit/followers","following_url":"https://api.github.com/users/teambit/following{/other_user}","gists_url":"https://api.github.com/users/teambit/gists{/gist_id}","starred_url":"https://api.github.com/users/teambit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/teambit/subscriptions","organizations_url":"https://api.github.com/users/teambit/orgs","repos_url":"https://api.github.com/users/teambit/repos","events_url":"https://api.github.com/users/teambit/events{/privacy}","received_events_url":"https://api.github.com/users/teambit/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/teambit/docs","description":null,"fork":false,"url":"https://api.github.com/repos/teambit/docs","forks_url":"https://api.github.com/repos/teambit/docs/forks","keys_url":"https://api.github.com/repos/teambit/docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/teambit/docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/teambit/docs/teams","hooks_url":"https://api.github.com/repos/teambit/docs/hooks","issue_events_url":"https://api.github.com/repos/teambit/docs/issues/events{/number}","events_url":"https://api.github.com/repos/teambit/docs/events","assignees_url":"https://api.github.com/repos/teambit/docs/assignees{/user}","branches_url":"https://api.github.com/repos/teambit/docs/branches{/branch}","tags_url":"https://api.github.com/repos/teambit/docs/tags","blobs_url":"https://api.github.com/repos/teambit/docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/teambit/docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/teambit/docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/teambit/docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/teambit/docs/statuses/{sha}","languages_url":"https://api.github.com/repos/teambit/docs/languages","stargazers_url":"https://api.github.com/repos/teambit/docs/stargazers","contributors_url":"https://api.github.com/repos/teambit/docs/contributors","subscribers_url":"https://api.github.com/repos/teambit/docs/subscribers","subscription_url":"https://api.github.com/repos/teambit/docs/subscription","commits_url":"https://api.github.com/repos/teambit/docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/teambit/docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/teambit/docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/teambit/docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/teambit/docs/contents/{+path}","compare_url":"https://api.github.com/repos/teambit/docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/teambit/docs/merges","archive_url":"https://api.github.com/repos/teambit/docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/teambit/docs/downloads","issues_url":"https://api.github.com/repos/teambit/docs/issues{/number}","pulls_url":"https://api.github.com/repos/teambit/docs/pulls{/number}","milestones_url":"https://api.github.com/repos/teambit/docs/milestones{/number}","notifications_url":"https://api.github.com/repos/teambit/docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/teambit/docs/labels{/name}","releases_url":"https://api.github.com/repos/teambit/docs/releases{/id}","deployments_url":"https://api.github.com/repos/teambit/docs/deployments","created_at":"2017-10-19T09:01:02Z","updated_at":"2017-10-25T09:21:50Z","pushed_at":"2017-10-25T09:46:55Z","git_url":"git://github.com/teambit/docs.git","ssh_url":"git@github.com:teambit/docs.git","clone_url":"https://github.com/teambit/docs.git","svn_url":"https://github.com/teambit/docs","homepage":null,"size":1504,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":1,"mirror_url":null,"archived":false,"open_issues_count":1,"forks":1,"open_issues":1,"watchers":3,"default_branch":"master"}},"base":{"label":"teambit:master","ref":"master","sha":"82600c9843ec998cbeb8eafe6a5faaff7f67eff0","user":{"login":"teambit","id":24789812,"avatar_url":"https://avatars1.githubusercontent.com/u/24789812?v=4","gravatar_id":"","url":"https://api.github.com/users/teambit","html_url":"https://github.com/teambit","followers_url":"https://api.github.com/users/teambit/followers","following_url":"https://api.github.com/users/teambit/following{/other_user}","gists_url":"https://api.github.com/users/teambit/gists{/gist_id}","starred_url":"https://api.github.com/users/teambit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/teambit/subscriptions","organizations_url":"https://api.github.com/users/teambit/orgs","repos_url":"https://api.github.com/users/teambit/repos","events_url":"https://api.github.com/users/teambit/events{/privacy}","received_events_url":"https://api.github.com/users/teambit/received_events","type":"Organization","site_admin":false},"repo":{"id":107522953,"name":"docs","full_name":"teambit/docs","owner":{"login":"teambit","id":24789812,"avatar_url":"https://avatars1.githubusercontent.com/u/24789812?v=4","gravatar_id":"","url":"https://api.github.com/users/teambit","html_url":"https://github.com/teambit","followers_url":"https://api.github.com/users/teambit/followers","following_url":"https://api.github.com/users/teambit/following{/other_user}","gists_url":"https://api.github.com/users/teambit/gists{/gist_id}","starred_url":"https://api.github.com/users/teambit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/teambit/subscriptions","organizations_url":"https://api.github.com/users/teambit/orgs","repos_url":"https://api.github.com/users/teambit/repos","events_url":"https://api.github.com/users/teambit/events{/privacy}","received_events_url":"https://api.github.com/users/teambit/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/teambit/docs","description":null,"fork":false,"url":"https://api.github.com/repos/teambit/docs","forks_url":"https://api.github.com/repos/teambit/docs/forks","keys_url":"https://api.github.com/repos/teambit/docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/teambit/docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/teambit/docs/teams","hooks_url":"https://api.github.com/repos/teambit/docs/hooks","issue_events_url":"https://api.github.com/repos/teambit/docs/issues/events{/number}","events_url":"https://api.github.com/repos/teambit/docs/events","assignees_url":"https://api.github.com/repos/teambit/docs/assignees{/user}","branches_url":"https://api.github.com/repos/teambit/docs/branches{/branch}","tags_url":"https://api.github.com/repos/teambit/docs/tags","blobs_url":"https://api.github.com/repos/teambit/docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/teambit/docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/teambit/docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/teambit/docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/teambit/docs/statuses/{sha}","languages_url":"https://api.github.com/repos/teambit/docs/languages","stargazers_url":"https://api.github.com/repos/teambit/docs/stargazers","contributors_url":"https://api.github.com/repos/teambit/docs/contributors","subscribers_url":"https://api.github.com/repos/teambit/docs/subscribers","subscription_url":"https://api.github.com/repos/teambit/docs/subscription","commits_url":"https://api.github.com/repos/teambit/docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/teambit/docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/teambit/docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/teambit/docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/teambit/docs/contents/{+path}","compare_url":"https://api.github.com/repos/teambit/docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/teambit/docs/merges","archive_url":"https://api.github.com/repos/teambit/docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/teambit/docs/downloads","issues_url":"https://api.github.com/repos/teambit/docs/issues{/number}","pulls_url":"https://api.github.com/repos/teambit/docs/pulls{/number}","milestones_url":"https://api.github.com/repos/teambit/docs/milestones{/number}","notifications_url":"https://api.github.com/repos/teambit/docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/teambit/docs/labels{/name}","releases_url":"https://api.github.com/repos/teambit/docs/releases{/id}","deployments_url":"https://api.github.com/repos/teambit/docs/deployments","created_at":"2017-10-19T09:01:02Z","updated_at":"2017-10-25T09:21:50Z","pushed_at":"2017-10-25T09:46:55Z","git_url":"git://github.com/teambit/docs.git","ssh_url":"git@github.com:teambit/docs.git","clone_url":"https://github.com/teambit/docs.git","svn_url":"https://github.com/teambit/docs","homepage":null,"size":1504,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":1,"mirror_url":null,"archived":false,"open_issues_count":1,"forks":1,"open_issues":1,"watchers":3,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/teambit/docs/pulls/5"},"html":{"href":"https://github.com/teambit/docs/pull/5"},"issue":{"href":"https://api.github.com/repos/teambit/docs/issues/5"},"comments":{"href":"https://api.github.com/repos/teambit/docs/issues/5/comments"},"review_comments":{"href":"https://api.github.com/repos/teambit/docs/pulls/5/comments"},"review_comment":{"href":"https://api.github.com/repos/teambit/docs/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/teambit/docs/pulls/5/commits"},"statuses":{"href":"https://api.github.com/repos/teambit/docs/statuses/a7323d0be6c9b3f7cea203d037372f7b1527f7a3"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"itaymendel"}}