A study recording of React,Redux and related testing. Because this is testing driven study, its content will be more focus on testing.
-
Unit Testing
Unit tests test units of a codebase. In react/redux context, they mostly can be components, action creators, reducers, middlewares...
Recommend Jest as the testing engine for most unit tests and Enzyme as the component testing utilities.
Shallow renderingis useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components. Shallow rendering means we render the component one level deep. This way we can make sure we’re only testing the component, our unit, and not a child component several levels down. -
Interaction Testing
UI is all about interacting with the user. We do this with a bunch of UI elements, such as buttons, links, and input elements. With interaction testing, we need to test if they are working properly. Enzyme
Full DOM renderingis ideal for use cases where you have components that may interact with DOM APIs or need to test components that are wrapped in higher order components. -
Structural Testing
Focus on the structure of the UI and how it’s laid out. Jest Snapshot Test
-
CSS/Style Testing
UI is all about styles (whether they’re simple, beautiful, or even ugly). With style testing, we are evaluating the look and feel of our UI components between code changes. This is a pretty complex subject and usually we do it by comparing images. If we are using inline styles all the way, we can use JEST snapshot testing. But to get even better results, we should consider using tools such as:
-
E2E Testing
Runs tests against your application running in a real browser, interacting with it as a user would.
-
Manual Testing
Since we are building UI for humans, we must also manually test them to see how they feel. Another reason for manual testing is for the better user experience. We should always try to test our UI with the naked eye.