Friday Picks 032

Read more →

Test Redirect With Jest, React-Router and React-Testing-Library

You've set up react-testing-library with Jest and react-router. You want to check that a component successfully redirects to another page. But how? Your React application comes with a protected route. If a user is not authenticated, the app should redirect the user to the login screen. You've managed to set up react-router-dom for your component. For example, here's an excerpt from a UserStatus.jsx component that only an authenticated user should be able to access:
Read more →

Month of Testdriven Python and React

Read more →

Example Multi Stage Docker Build for React

I'm still trying to improve my Docker builds. Here's an example for a multi-stage Docker build for React:

base imageFROMnode:12.13.1-alpine as compile-image# install global packagesENV NPM_CONFIG_PREFIX=/home/node/.npm-globalRUN npm install npm@latest -gRUN npm install pnpm react-scripts@3.3.0 -g# set working directory & give permissions to user nodeRUN mkdir -p /usr/src/app && chown node:node /usr/src/appWORKDIR/usr/src/app# switch to non-root user & install dependenciesUSERnodeCOPY package*.json /usr/src/app/COPY pnpm-lock.yaml /usr/src/app/pnpm-lock.yamlENV PATH /usr/src/app/node_modules/.bin:$PATHENV PATH=$PATH:/home/node/.npm-global/binRUN pnpm install# set environment to production, overwrite# with docker-composeARG NODE_ENV=production ENV NODE_ENV $NODE_ENV# create buildCOPY .

Read more →

Fix Import React Renderer With Jest Error

A few days ago, I updated a React application that uses Jest and Enzyme for testing. The new tests yielded errors like cannot find module ‘react-test-renderer’. Solution: Install react-test-renderer and enzyme-to-json as dev dependencies, and re-factor tests to use enzyme-to-json. npm i –save-dev react-test-renderer enzyme-to-json In your package.json file, add the serializer to your jest config: { "jest": { "snapshotSerializers": [ "enzyme-to-json/serializer" ] } } Example test file before update:
Read more →

Learning About Best Practices for Docker and Node

Today I've tried to update one of my Docker apps that uses React, Enzyme, and Jest. This lead me on a wild goose chase about react-test-renderer and best practices for Docker builds for Node.js. I'm still not sure where the problem is (Enzyme, maybe?). But I found three useful resources for Docker and Node.js: Docker and Node.js Best Practices Node + Docker Hello World, for Showing Good Defaults for Using Node.
Read more →

Friday Picks 028

Read more →

Decked Out With Black Friday Swag

Read more →

Black Friday Deals 2019

Here are some sweet Black Friday Deals. Wes Bos Wes Bos creates high-quality courses about JavaScript and React. Now all of those courses are on sale. I bought the FullStack Advanced React & GraphQL course. Wes glosses over some concepts, but overall the quality is quite high, and the course was well worth the money. Find an overview over all courses at wesbos.com/courses. Talk Python The Mega-Bundle Deal is $50 off: $149 for the whole course catalog.
Read more →

Friday Picks 026

Here are some useful links for you: Colors And Fonts: a curated library for front-end developers and designers RxJS with React Hooks for state management: a beginner-friendly tutorial Barebones AWS Amplify + React + GraphQL App: get started quickly with this tutorial Building a payments system with React and Stripe: this tutorial shows you how to use Stripe in your React.js application React, Redux and JavaScript architecture: a post from 2018 that's still helpful in understanding the basic concept of Reat.
Read more →