# components-state-testing.mo

## Owner: [Tycho Tatitscheff](https://github.com/tychota)

## Prerequisites *(\~5 min)*

* [ ] Have [Jest](https://facebook.github.io/jest/) installed
* [ ] On React, follow the Jest [documentation](https://facebook.github.io/jest/docs/en/tutorial-react.html#content)
* [ ] On React Native, it's already done (if needed, jest [doc](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#content))

## Steps *(\~30 min)*

* Create a simple test:

  ```javascript
  describe('ComponentToTest', () => {
  it('should test a simple true === true', () => {
    expect(true).toBe(true);
  });
  });
  ```
* Import the necessary packages and your component:

  \`\`\`javascript

  import React from 'react';

  import renderer from 'react-test-renderer';

import ComponentToTest from './ComponentToTest.component';

````
- Add the first test of your component, and remove the true === true
  - Render your component with react-test-renderer, it will transform your component in a JavaScript object instance, which you will be able to test, accessing its state, triggering its methods:
  ```javascript
  describe('ComponentToTest', () => {
    const props = {};

    const component = renderer.create(
      <ComponentToTest
        props={props}
      />
    );
    //...
  });
````

* Use this instance in your `it` test, the property `getInstance()` allows you to access all the properties of the component class. Now you can test your initial state:

  ```javascript
  describe('ComponentToTest', () => {
  // ...
  it('should init the state', () => {
    expect(component.getInstance().state).toEqual({
      fakeStatus: 'init',
    });
  });
  });
  ```

  * Add new tests, faking a user action and the impact it has on the component state:

    ```javascript
    describe('ComponentToTest', () => {
    // ...
    it('should set the component fakeStatus to "inProgress"', () => {
    component.getInstance().onButtonPress();
    expect(component.getInstance().state).toEqual({
    fakeStatus: 'inProgress',
    });
    });
    // ...
    });
    ```


---

# 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://bamtech.gitbook.io/dev-standards/code-quality/components-state-testing.mo.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.