How React Testing Library Can Improve Your Mental Health [Part 2]

How React Testing Library Can Improve Your Mental Health [Part 2]

How React Testing Library Can Improve Your Mental Health Part 2

You can find the first part here: Why testing?

Let’s continue writing our Redux tests. The file we are testing is:

const initialState = {
   todos: [
       { id: 1, text: 'Do boring stuff', completed: false, color: 'purple' },
       { id: 2, text: 'Write tests!', completed: false, color: 'blue' }
   ],
   filters: {
       status: 'All',
       colors: []
   }
}
function nextTodoId(todos) {
const maxId = todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1)
return maxId + 1
}
export default function appReducer(state = initialState, action) {
switch (action.type) {
case 'todos/todoAdded':
           {
return {
                   ...state,
                   todos: [
                       ...state.todos,
                       {
                           id: nextTodoId(state.todos),
                           text: action.payload,
                           completed: false
                       }
                   ]
               }
           }
case 'todos/todoToggled':
           {
return {
                   ...state,
                   todos: state.todos.map(todo => {
if (todo.id !== action.payload) {
return todo
                       }
return {
                           ...todo,
                           completed: !todo.completed
                       }
                   })
               }
           }
case 'filters/statusFilterChanged':
           {
return {
// Copy the whole state
                   ...state,
// Overwrite the filters value
                   filters: {
// copy the other filter fields
                       ...state.filters,
// And replace the status field with the new value
                       status: action.payload
                   }
               }
           }
default:
return state
   }
}

react reactjs unit-testing testing react-tutorial

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Why do you need Unit Testing in React Native application (Video Tutorial)?

React Native Tutorial: How Can You Start with Unit Tests? Start it right now - save your time in the future. 1. Link to the article - https://2muchcoffee.com...

Interaction Testing with React Testing Library

Testing is complicated. I’ve certainly never been good at it. For the longest time, I’ve only been focused on basic function input-output unit tests. Why? Because they were easy — you didn’t need to render HTML, you didn’t need to query DOM elements, you didn’t need to interact with said DOM elements. But of course, React component testing is a necessity for any mature codebase. And it finally came time for me to sit down and figure it out. A window into React component testing. Interaction Testing with React Testing Library

Start Testing In ReactJS - React Testing Library Tutorial

I will teach you guys how to start testing in React using the React testing library. I tried to get an example of each type of test so that you guys have a good starting point. I teach you guys how to test functions, ui components, and fireEvents. -

Beginners Guide to Get Started with Unit Testing in React Native

In this article, we will be looking at the basic principles of unit tests with a simple react-native Button component.