Friday Picks 036

Read more →

Friday Picks 035

Read more →

Friday Picks 034

Read more →

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 →