Lessons learned testing React & Redux apps with Jest and Enzyme

Lessons learned #testing #reactjs  & #Redux #apps with #Jest and #Enzyme  #javascript

  • It makes things much easier, and you can pattern match (hit p then type part of your file/folder name) to make sure you’re not running a ton of things every save.Make sure you don’t close off your test() statements early.Parentheses man… 😢Is perfectly valid Javascript, but your test (while it…
  • I only noticed that I had this copy and pasted for one section of my unit tests when I made an error and realized the test didn’t fail.Which leads me to…Make sure your tests failIf you’re awesome and use TDD, then props to you you’re already doing this 🎉For the rest…
  • Time to move on.”However this leads to errors like the aforementioned one, and it’s surprisingly easy to grab and test the wrong element or mocked function — especially if you’re copy pasting from a similar test.It’s not hard to just comment out an essential section of a test and make sure it…
  • It’s also easy to copy to another component with a similar need for testing.In fact all of the little conventions I’m following here (beforeEach mounting a wrapper, what I name things, spreading a props object) are great to have defined somewhere so people can easily understand and copy test functionality…
  • It also makes testing quite simple and separates rendering vs data concernsI try to extract any complex data manipulation to pure functions and test thoseI use end to end (Selenium) and integration tests to check on sections of my app to make sure it all fits together.It’s not perfect, I’m…

If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I…
Continue reading “Lessons learned testing React & Redux apps with Jest and Enzyme”

TDD is evil. Snapshot testing is the future. – Łukasz Sentkiewicz – Medium

TDD is evil. Snapshot testing is the future.  #javascript #tdd #testing #jest #react #reactjs

  • Simply add some tests, after you create the code.TDD in practiceLet’s take a look at an example article how to do TDD in React.Getting Started with TDD in React by @Dave CeddiaYou can find the final source in the GitHub repo.The task is to create a simple app with the following features:Allow to add new items (one string value).
  • When you have tests for the simple components that render a user’s name and email address (for example), you can later split that component up into pieces and be confident that it still works correctly.There are many uses cases where refactoring without changing functionality from the user perspective can break the tests.The original InputArea:export class InputArea extends Component { constructor(props) { super(props); this.state = { text: ” }; this.setText = this.setText.bind(this); this.handleClick = this.handleClick.bind(this); }setText(event) { this.setState({text: event.target.value}); }handleClick() { }render() { return ( div input value={this.state.text} onChange={this.setText}/ button /div ); }}Can be refactored and simplified to:export class InputArea extends Component { render() { const {onSubmit} = this.props; return ( div input ref={(input} = (this.input = input)} / button onClick={() = /div ); }}The functionality won’t change, but it will break some tests.Another TDD tutorial TDD and React Components by Will VaughnThe task is to create another simple app with the following features:display list of radio inputsget onSelection callback if the input is selectedThe created component is not well designed, and it shows that using TDD doesn’t make your design perfect.There are following problems.Using a component factory (React) = (props) = {…} .
  • Tests test something, but they won’t give you 100% guarantees that the implementation is correct.Few example:It’s not verified if the input have an attribute type=”radio” .
  • jsimport * as types from function addTodo(text) { return { type: types.ADD_TODO, text }}Testing usually looks like thisimport * as actions from * as types from () = { it(‘should create an action to add a todo’, () = { const text = ‘Finish docs’ const expectedAction = { type: types.ADD_TODO, text } })})The fastest way to produce such unit tests it’s just copying code between the test file and the target source file.
  • My TDD doesn’t work in “Red”, “Greed” way, but rather in “Red”, “Red”, “Red”, “Green” way.If you just do unit testing without TDD, it’s sometimes easier to get the output from console.log(result) and then put it to to TDDI started using Facebook Jest and I test everything with snapshots.My development process looks similar to TDD, but I am able to iterate much faster.Development cycleCreate a test case with an empty snapshot.describe(‘actions’, () = { it(‘addTodo’, () = { expect(”).

I’ve been participating in Topcoder for 4 years, and during this time I completed over 250 contests. We tried to use unit tests many times, and multiple members including copilots (Project Managers…
Continue reading “TDD is evil. Snapshot testing is the future. – Łukasz Sentkiewicz – Medium”

Practical Redux, Part 1: Redux-ORM Basics · Mark’s Dev Blog

  • Overall, I highly recommend the use of Redux-ORM in any Redux app that needs to handle normalized nested/relational data .
  • Once you’ve defined your models, you need to create an instance of the Redux-ORM Schema class, and pass the model classes to its register method.
  • It helps solve a number of use cases that are common to many Redux applications, particularly related to managing normalized relational data in your store.
  • In Part 2, we’ll look at specific concepts you should know when using Redux-ORM, and some of the ways I use it in my own application .
  • The majority of my reducer logic is more generic and not class-specific, so I opted instead to write my own slice reducer for this data and just use Redux-ORM as a tool to help with that.

Over the last year, I’ve become a very big fan of a library called Redux-ORM, by Tommi Kaikkonen. It helps solve a number of use cases that are common to many Redux applications, particularly related to managing normalized relational data in your store. I’ve used it heavily in my own application, and have come up with some useful techniques and approaches for using it. Hopefully you’ll find them useful in your own application as well.
Continue reading “Practical Redux, Part 1: Redux-ORM Basics · Mark’s Dev Blog”