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”

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”

Codemod tests from createClass to ES2015 classes by keyanzhang · Pull Request #7321 · facebook/react · GitHub

We just used the new codemod to codemod @reactjs itself and it was fun:

  • ./src/isomorphic/classic/class/__tests__/ReactClassMixin-test.js: `Component` was skipped because of inconvertible mixins.
  • ./src/addons/__tests__/ReactComponentWithPureRenderMixin-test.js: `Apple` was skipped because of inconvertible mixins.
  • ./src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js: `Switcher` was skipped because of inconvertible mixins.
  • ./src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js: `Anon` was skipped because of invalid field(s) `render` on the React component.
  • ./src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js: `Row` was skipped because of invalid field(s) `render` on the React component.

Read the full article, click here.


@keyanzhang: “We just used the new codemod to codemod @reactjs itself and it was fun:”


react – A declarative, efficient, and flexible JavaScript library for building user interfaces.


Codemod tests from createClass to ES2015 classes by keyanzhang · Pull Request #7321 · facebook/react · GitHub