Migrating Ava to Jest

First off. Star the repo here https://github.com/facebook/jest so you can show some love for the hardwork that has been put into it.

Props

I was an early adopter of Jest back in the early days ( ~v0.4). It was okay but difficult to setup and slow with sometimes weird results and behaviors.

Tireless effort has been done by Christoph Pojer to get to the latest Jest (v16.01) so props to him and others working with him.

Check out the fantastic documentation here https://facebook.github.io/jest/docs/getting-started.html

Migrating in seconds

There is almost nothing to write about on this topic because it was almost too easy. Mostly because of jest-codemods. It is a set of codemods crafted to transition your Tape or Ava project to Jest.

It is worth it. Jest has come along way when it comes to speed, functionality, configuration options, and ease of configuration (or lack there of to get started).

There were minor configurations I had to setup, but most were copying and pasting from the documentation.

Lets dive into the process real quick.

First and last step to transition tests

First install jest-codemods

npm install -g jest-codemods

Then run jest-codemods in a desired directory. It will prompt you with Ava, Tape, or a both option. Then you provide a glob. I was running in my root so I provided the glob **/__tests__/**/*.js to convert all of my tests.

That was it.

Read on →
Tagged under ava, jest, react, testing

React Native - Maintain Touchable Items with a Parent PanResponder

What Are We Building

Intro

One of the issues I’ve noticed with PanResponder is that people assume it is an all or nothing. By that I mean adding a PanResponder in a parent view means it will steal all of your touches and Touchable items won’t be touchable any longer.

You may be running into this because you copy and pasted it from here the documentation here https://facebook.github.io/react-native/docs/panresponder.html and it includes a capture phase returning true. (I copy and paste this all the time). We’ll talk about the capture phase next.

Read on →
Tagged under Native, PanResponder, React, Touchable

CSS Modules, Webpack and Testing

The Problem

When getting into some basic React testing with CSS Modules I ran into one issue. How the hell do I test them?

You may see the issue that I faced requiring a .css file, if you don’t let me show you.

1
2
3
4
5
6
7
import React from "react";
import MyCss from "./somecss.css";
import classnames from "classnames";

const MyComponent = ({disabled}) => <div className={classnames(MyCss.container, {[MyCss.disabled]: disabled})} />

export default MyComponent;

So there isn’t really much to test here, but lets say we wanted to make sure that a div had the disabled class when it was given a disabled prop. We fire up our test, create it, babel compiles, but oh no, MyCss is undefined, or an empty object. Well duh, we’re using Webpack to process our CSS.

For that matter we could use something to mock the import right? Yeah you could but lets introduce something even more awesome so we don’t have to create custom mocks.

Babel Plugin Webpack Loaders Awesomeness

Babel Plugin Webpack Loaders allows us to run our tests and process all requires through our typical webpack loaders.

Read on →
Tagged under babel, css, css-modules,, modules,, react,, testing,, webpack,

React Native FlexboxFroggy

If you are in the React Native world and haven’t heard about Exponent then you’ve been living under a rock. It’s being built by James Ide, Brent Vatne, and Charlie Cheever. All who have contributed significantly to the React Native community and ecosystem.

Brent is holding a contest to win some awesome prizes, including tickets to the sold out ReactJS 2016 Conf. Check out the contest here https://gist.github.com/brentvatne/7d88f846417452355b18.

What does this have to do with flexbox? Well as my entry into the contest I converted http://flexboxfroggy.com/ to React Native.

Even adding animations was a breeze! One line of code LayoutAnimation.spring() easily makes all frogs spring into place!

You can check out the code here https://github.com/browniefed/flexboxfroggy

Or if you have Exponent installed you can run it easily on your phone by just tapping this link http:[email protected]/flexboxfroggy

If you don’t have Exponent installed I highly suggest you install it!

That’s all from me for now. Looking forward to getting back to blogging in 2016!

Tagged under exponent, flexbox, flexboxfroggy, react-native

React Native Animated Book

So I wrote a book of sorts on React Native animations. Mostly covering the animated API, and soon much much more. Check it out here http://browniefed.com/react-native-animation-book/.

I cover the API, and walk through basic animation examples, and soon advanced topics. Learn to create a fun dragging, spinning square.

This is just a quick update :)

Tagged under animated, animation, book, react-native