Mike Kruk tamagokun

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

Clover Boot Flags

Flag	Description
-v	Verbose Mode
-x	Safe Mode
-s	Single User Mode
-no-zp	Zone Postponing (use if hanging)
cpus=1	Single CPU Core Mode
-f	No Kext Cache Mode (use if hanging)

	sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
	sudo /sbin/mkswap /var/swap.1
	sudo /sbin/swapon /var/swap.1
	sudo chmod 600 /var/swap.1

	# Add to /etc/fstab
	/var/swap.1 swap swap defaults 0 0

	FROM alpine:3.3
	MAINTAINER Tom Maiaroto <[email protected]>

	# Install packages
	RUN apk --update --repository http://dl-3.alpinelinux.org/alpine/edge/main add \
	freetype-dev \
	libjpeg-turbo-dev \
	libpng-dev \
	libwebp-dev \
	php7 \

	#elC - The elementary OS Combobulator - There are many issues within the community that tend to come up a lot.
	#I know many of them are open bug reports, but until they are patched we can provide a consolidated list of work-arounds.
	#I think this will be helpful for newcomers and veterans alike

	#enable ppas
	sudo apt install -y software-properties-common python3-software-properties python-software-properties

	#install elementary tweaks
	sudo add-apt-repository -y ppa:philip.scott/elementary-tweaks
	sudo apt update -y

	import NextLink from 'next/link';
	import React from 'react';
	import { Text } from 'react-native-web';

	// https://github.com/zeit/next.js#with-link
	// Combines the Next.js <Link> with React Native's <Text> component.
	// Enables use like this:
	//
	// <Link
	// href={href}

	import React, { useEffect } from 'react'
	import { runTiming } from 'utils/animations'
	import Animated from 'react-native-reanimated'
	import {
	Dimensions,
	Keyboard,
	UIManager,
	TextInput,
	Platform
	} from 'react-native'