<commit_before>---
layout: post
published: true
title:  "Hacking together a TDD workflow for redux and components"
date:   2022-10-07 10:00:00
categories: react
summary: "A blogpost based on my notes trying out TDD with components in react with redux "
icon: fab fa-react
tags:
    - redux
    - react
    - typescript
    - tdd
    - testing

---

Whilst I typically spend more of my time working on backend code ([in python](https://blog.meadsteve.dev/python/)) I 
also work on the frontend (mostly typescript). I'm a big fan of TDD and I've also worked with redux but I've never 
combined the two before. This post will be a little bit more stream of consciousness than normal and is basically me 
documenting an approach I've tried out. Redux is not an area I'm an expert in so I'd welcome any feedback from people 
reading this post with better ideas.

## I won't discuss driving slice development with TDD
Most of the code around slices is purely functional, taking a immutable
starting state and returning the next sate. This is fairly easy to test with standard techniques. 

## Onto components
Where I ran into bigger problems was around testing the components. I had these partially covered with end to end
tests running in [cypress](https://www.cypress.io/). I also won't cover that here but `learntdd.in has a [good tutorial
on outside in testing](https://learntdd.in/react/) with cypress for react.

My problems started when I wanted to test a component in isolation. One of the main responsibilities of my components
is to dispatch the correct events to redux. So this was absolutely something I wanted/needed to test.
<commit_msg>add reddit link to redux tdd post<commit_after>---
layout: post
published: true
title:  "Hacking together a TDD workflow for redux and components"
date:   2022-10-07 10:00:00
categories: react
summary: "A blogpost based on my notes trying out TDD with components in react with redux "
icon: fab fa-react
tags:
    - redux
    - react
    - typescript
    - tdd
    - testing
comments:
  title: Discuss this post over on reddit
  link: https://www.reddit.com/r/react/comments/xxu257/how_do_you_tdd_with_redux/
---

Whilst I typically spend more of my time working on backend code ([in python](https://blog.meadsteve.dev/python/)) I 
also work on the frontend (mostly typescript). I'm a big fan of TDD and I've also worked with redux but I've never 
combined the two before. This post will be a little bit more stream of consciousness than normal and is basically me 
documenting an approach I've tried out. Redux is not an area I'm an expert in so I'd welcome any feedback from people 
reading this post with better ideas.

## I won't discuss driving slice development with TDD
Most of the code around slices is purely functional, taking a immutable
starting state and returning the next sate. This is fairly easy to test with standard techniques. 

## Onto components
Where I ran into bigger problems was around testing the components. I had these partially covered with end to end
tests running in [cypress](https://www.cypress.io/). I also won't cover that here but `learntdd.in has a [good tutorial
on outside in testing](https://learntdd.in/react/) with cypress for react.

My problems started when I wanted to test a component in isolation. One of the main responsibilities of my components
is to dispatch the correct events to redux. So this was absolutely something I wanted/needed to test.

{'fraction_non_alphanumeric': 0.05866976474005228, 'fraction_numerical': 0.009003775776938717, 'mean_word_length': 3.905982905982906, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 7, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2278578', 'n_tokens_mistral': 962, 'n_tokens_neox': 912, 'n_words': 516}