# Testing

Bug fixes and features should always come with tests. If you want a visual representation of the test coverage of your code run [yarn test:coverage](https://github.com/shapeshift/web/tree/301d2a7df04ee50a07288f4efa4a28390df0423e/docs/README.md#yarn-test:coverage).

### Testing Tools

* Unit - test both frontend code in isolation
  * [jest](https://jestjs.io/docs/getting-started), [react testing library](https://testing-library.com/docs/react-testing-library/intro/), [react testing library hooks](https://github.com/testing-library/react-hooks-testing-library#example)
* E2E - to test the full stack completely on critical flows
  * [cypress](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests)
    * When selecting dom elements use `data-testid` instead of using a class or id.

### Testing Ui Business Logic

Separate the business logic from the view as much as possible. Create hooks, helpers & reducers to utilize this logic from the ui and test that code in isolation from it's ui.

## Unit Testing

This is an example of how we structure our unit tests.

```javascript
import mockAxios from 'axios'
import { isLoggedIn } from './isLoggedIn'

const UserData = { id: 1, name: 'UserName' }

const mockUserData = id => {
  mockAxios.get.mockImplementationOnce(() => Promise.resolve(id ? data : undefined))
}

describe('isLoggedIn', () => {
  describe('isLoggedIn', () => {
    it('should return true when passed a userId', () => {
      const userId = 1
      mockUserData(userId)
      expect(isLoggedIn(userId)).toBe(true)
    })

    it('should return false when userId is undefined', () => {
      const userId = undefined
      mockUserData(userId)
      expect(isLoggedIn(userId)).toBe(false)
    })
  })
})
```

## Hook Testing

This is an example of how we structure our hook tests

```javascript
import { renderHook } from '@testing-library/react-hooks'
import { useIsComponentMounted } from './useIsComponentMounted'

const setup = () => {
  return renderHook(() => useIsComponentMounted())
}
describe('useIsComponentMounted hook', () => {
  it('should be true on render', () => {
    const { result } = setup()
    expect(result.current.current).toBe(true)
  })

  it('should false on unmount', () => {
    const { result, unmount } = setup()
    unmount()
    expect(result.current.current).toBe(false)
  })
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shapeshiftdao.gitbook.io/web/docs/testing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.