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”

Organizing Tests in Jest – Jeff Lombard – Medium

Organizing Tests in Jest  #jest #javascript #react #softwaretesting #reactjs

  • This includes organization.I’ve seen two popular ways suggested for organizing tests in Jest:Putting all of your test code into a neatly organized /tests directory.Putting your test code next to the files they are testing.Both of these suggestions are valid, but to have the elegance of a master craftsman, we should consider the level of the test that is being written.Testing LevelsThere are many testing levels, but for simplicity we’re just going to talk about two here.
  • “Unit testing refers to tests that verify the functionality of a specific section of code, usually at the function level.
  • |- /main| |- index.js| |- index.test.jsIntegration tests run against many lines of code in many files.
  • So include the type of test right in the name of the and api.int.test.jsConclusionAn ideal set up would look something like this:|- /main| |- index.js| |- index.unit.test.js|- /supporting| |- fetch.js|- /tests| |- /int| | |- api.int.test.jsThat way you can easily find your tests.
  • For unit testing run jest unit and for integration testing run jest int.As with anything, there is no single way of doing this.

If you haven’t already tried out Jest, you should. Even if you’re not using React. It’s dead simple and loaded with some cool features like snapshot testing. Jest does a great job of keeping reports…
Continue reading “Organizing Tests in Jest – Jeff Lombard – Medium”

Jest Snapshot Testing with React Storybook

  • React Storybook allows for easy snapshot testing integration with Facebook’s Jest testing framework.
  • You don’t need to do anything related to snapshot testing.
  • Either I can fix this code, or I can accept this other updated snapshot.
  • Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered.
  • Now I can see there are two snapshots are different from the existing one.

React Storybook allows for easy snapshot testing integration with Facebook’s Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!

Continue reading “Jest Snapshot Testing with React Storybook”

Snapshot Testing: Use With Care

  • When writing Snapshot Tests that are intended to stick around, you need to be careful to write really solid test descriptions, because the body of the test no longer communicates anything about what’s important about the test case.
  • During future runs, the test will compare the latest JSON with the snapshot file.
  • Snapshot Testing in Jest was designed to make it easy to test React components, but it can be used for more than that.
  • The ability to quickly update a snapshot when it changes makes for a nicer, faster workflow.
  • It is definitely worth experimenting with Jest’s Snapshot Testing feature.

Snapshot Testing has been getting a fair bit of attention recently with some new tool support that makes it easy to use. But is that a good thing? …
Continue reading “Snapshot Testing: Use With Care”

Jest 15.0: New Defaults for Jest · Jest

@marekpiechut Mind updating this part? Jest does *not* mock by default anymore.

  • It can now switch between running all tests or only test files related to changed files by pressing a or o .
  • Jest now uses verbose mode when only a single test file is executed.
  • By pressing p a prompt appears that allows to specify a test pattern to focus on a specific set of files.
  • Jest used to implicitly reset all modules before each test and we recommended requiring modules in beforeEach or inside of tests.
  • When running multiple tests in parallel, it was often hard to find out which test and which module was calling a log function.

We spent the past year making Jest faster, easier to configure, added tons of features and built snapshot testing. However, there were two areas where we invested very little: the CLI output and user experience. With Jest 15 we are changing the framework radically to make it easier to use both for beginners and experienced users. We are excited that our investment in Jest is now paying off: we can move fast and improve the framework for Facebook and the open source community at light-speed. Jest’s goal is to come with batteries included and to require as little configuration as necessary. We recently got a chance to explain our philosophy on a create-react-app issue.
Continue reading “Jest 15.0: New Defaults for Jest · Jest”

Jest 14.0: React Tree Snapshot Testing · Jest

  • For Facebook’s native apps we use a system called “snapshot testing”: a snapshot test system that renders UI components, takes a screenshot and subsequently compares a recorded screenshot with changes made by an engineer.
  • As a result many people stopped writing tests altogether which eventually led to instabilities.
  • With snapshot testing I do not need the output files, the snapshots are generated for free by Jest!
  • Engineers frequently told us that they spend more time writing a test than the component itself.
  • import renderer from ‘react/lib/ReactTestRenderer’ ; test ( ‘Link renders correctly’ , ( ) = > { const tree = renderer .

Read the full article, click here.

@cpojer: “Jest 14.0: React Snapshot Testing, experimental React-Native support and future plans for Jest. Try it out now!”

One of Jest’s philosophies is to provide an integrated “zero-configuration” experience. We want to make it as frictionless as possible to write good tests that are useful. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in stable and healthy code bases.

Jest 14.0: React Tree Snapshot Testing · Jest