# Test with Enzyme

In order to test components with enzyme or other library that renders actual components you need to do following:

* prepare test environemt

```typescript
 beforeEach(() => {
    const initialState = {
        todos: [
            { id: 1, name: 'test', description: 'test' },
            { id: 2, name: 'test', description: 'test description' },
        ],
    };

    ReactStateTestBed.setTestEnvironment(new ImmerDataStrategy());
    ReactStateTestBed.useComponentRenderer = true;
    ReactStateTestBed.strictActionsCheck = false;
    ReactStateTestBed.createActions(TodosStateActions, initialState, ['todos']);

    wrapper = shallow(<Todos />);
});
```

* **useComponentRenderer**- since react-state unit testing is designed with posibility to test **JUST** component business logic. For this we do not want forceUpdate is called on state change. However if you testing with renderers like Enzyme you would like your components are updated after state change. So with this flag you configuring TestBed to call forceUpdate on state change.
* **strictActionCheck** - since component template can have multiple components and we are not creating actions for each of them - we configure TestBed to not throw an error if actions for component were not found. It is optional if:
  * You have just one level component
  * You provide all actions to all child components
* **createActions** - creates actions for top component with initial state. All nested actions of nested components will be created automatically. \
  **tip**: *initialState, that top components was created with, should contain structure that matches nested component actions paths. For exmple: if your nested component actions path is @InjectStore(\[''${stateIndex}]) and your top component template is: \<TodosDescription  statePath={this.statePath} stateIndex={1}>\</TodoDescription> you need to make sure that initial state has array of todos with 2 items*\
  \
  Also you can ovveride each action of nested components by creating custom ones by calling createActions. **ReactStateBed will look in list of custom actions before trying to create real ones**.

and write your spec

```typescript
it('should change child description on button click', () => {
    expect(wrapper.render().find('.description').text()).toEqual('test description');
    
    const button = wrapper.find('.button');
    button.simulate('click');
    
    expect(wrapper.render().find('.description').text()).toEqual('changed description');
});
```


---

# 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://vytautaspranskunas.gitbook.io/react-state-rxjs/unit-testing/test-with-enzyme.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.