natterstefan

Jest - mock useState

When using import React, { useState } from 'react' in your components, this is how you can mock useState with jest.

natterstefan

Password Autofill on a React Native Expo app

Developing an app to accompany our website, worried that we would lose people in the transition if they couldn't remember their password, we were looking to make our app do Password AutoFill, a feature in iOS.

A talk from WWDC introducing the feature: https://developer.apple.com/videos/play/wwdc2017/206/

It works well, but there were a few bumps in the road making it work for React Native on Expo, so here are some notes to help out.

Apple's docs are here: https://developer.apple.com/documentation/security/password_autofill and they say something like this:

natterstefan

Editor.js - Custom Inline Tool "Link"

This is our custom implementation of the Inline Tool "Link" with a target and title attribute.

--> used and tested with @editorjs/editorjs@2.17.0

Related Issues

natterstefan

VSCode | Debug tests in Create-React-App (all or single file)

Add launch.json into the .vscode folder.

Now, enter the Debug view. Either add debugger into one of the tests or add breakpoints, before you execute one of the scripts.

natterstefan

Prevent logging all the JSDOM internal errors.

References

• jestjs/jest#5267 (comment)
• jestjs/jest#5223 (comment)

natterstefan

Research | macOS fix node-gyp

Node

Update asdf

asdf plugin-update --all

natterstefan

/**
* Works in Next.js 10.x
*/
import React from 'react'
import parse, {
  domToReact,
  attributesToProps,
  Element,
  HTMLReactParserOptions,
} from 'html-react-parser'

natterstefan

How to debug Jest tests with Chrome

Taken from Jest's troubleshooting page:

• Place a debugger; statement in any of your tests, and then, in your project's directory
• yarn test-debug
• open Chrome and go to chrome://inspect
• click on "Open Dedicated DevTools for Node"
• click on the address displayed in the terminal (usually something like

natterstefan

// function to generate a random number within a range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// function to generate a random mouse coordinate within the viewport
function getRandomCoordinate() {
  const x = getRandomNumber(0, window.innerWidth);
  const y = getRandomNumber(0, window.innerHeight);
  return { x, y };

natterstefan

Next.js | Catch-All route including index