Categories
Mastering Development

Property ‘toBeInTheDocument’ does not exist on type ‘Matchers

Trying to setup testing for a components library. I’ve tried many example and all similar threads on this with no luck. My setupTests.ts file is correctly being loaded (proven with a console.log), and the library seems to be available as if I add import { toBeInTheDocument } from ‘@testing-library/jest-dom/matchers’ and log toBeInTheDocument it is present. […]

Categories
Development

Eslint not working with the TypeScript syntax

I am trying to configure eslint for my REACT-TypeScript project. It was previously using tslint which is going to deprecate soon. I have gone through the web and finally was able to create my .eslintrc.json: { “parser”: “@typescript-eslint/parser”, “parserOptions”: { “ecmaFeatures”: { “jsx”: true }, “project”: “./tsconfig.json”, “ecmaVersion”: 2018, “sourceType”: “module” }, “env”: { “browser”: […]

Categories
Development

How to stop TypeScript error ‘Type A has no properties in common with Type B’ when Type B “extends” Type A in some way

(edited Title to make more general) I’m working in a codebase which uses React class components and Typescript everywhere, and I’m trying to implement react-dropzone (a lightweight, simple but effective file-drop component) using the class-based method. The Hooks implementation is cleaner and simpler but I’d prefer to avoid so as to preserve the paradigm maintained […]

Categories
Development

Jest cannot load svg file

In my app I use React and TypeScript. I tried to run jest tests I get following error: C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1 ({“Object.<anonymous>”:function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns=”http://www.w3.org/2000/svg” width=”18.725″ height=”23.947″ viewBox=”0 0 18.725 23.947″> ^ SyntaxError: Unexpected token < 1 | import React, { FC } from ‘react’; 2 | > 3 | import SockIcon from ‘../../images/icons/Sock.svg’; | ^ 4 | 5 […]

Categories
Development Vue

How to configure Jest added to an app via Vue cli 3?

I’m trying to introduce testing with Jest into an app build with Vue. I’ve run vue add unit-jest and similarly to what testing single file components with Jest guide suggests, created the following simple test file (Paginator.spec.js in the same folder as Paginator.vue, that is /src/components): import { mount } from ‘@vue/test-utils’ import Paginator from […]

Categories
Development

make custom CLI install npm dependencies

I would like to create a Node CLI to generate new projects based on Node, Typescript, Jest, Express and TSLint. Basically this CLI should create a new project folder, install all the dependencies and call the dependency –init commands from npm, tsc and jest. It should make some changes to the config files and create […]