Categories
Development

Why is this React Typescript app throwing errors?

I just created a new React app using npx create-react-app my-app –template typescript and it was working fine until I changed my component to from a stateless one to a stateful one. The error: JSX element type ‘App’ is not a constructor function for JSX elements. TS2605 3 | import App from “./App”; 4 | […]

Categories
Development

Jest & React & Typescript & React-Testing-Library error

I have a React/NextJS project setup using Typescript and am adding unit testing with Jest and React Testing Library. A unit test for my component looks like this: import React from ‘react’; import ‘@testing-library/jest-dom/extend-expect’; import { render } from ‘@testing-library/react’; import AppLayout from ‘.’; describe(‘<AppLayout>’, () => { it(‘renders children’, () => { const children […]

Categories
Development

“Navbar refers to a value, but is being used as a type here” when trying to render a shallow copy of my component when testing

I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, I get the ts error “‘Navbar’ refers to a value, but is being used as a type here.”, and underneath […]

Categories
Development

How to correctly type the apply method for browser console logging functions?

I’ve written the below class to capture the console.log function in my app so I can review the logs on devices where I can’t easily access the browser console and so later I can bundle the captured logs when reporting errors. In order to get it working, I’ve had to add ts-ignore like this: // […]