Jest complains about Typescript syntax - reactjs

When I run yarn test Jest throws an error that says
'Const declarations' require an initialization value.
Which is not what I'm doing!
> 4 | const config: HardhatUserConfig = {
| ^
5 | solidity: "0.8.9",
6 | paths: {
7 | artifacts: "./src/artifects",
I think it is obvious that jest is having problem with TS syntax.
How can I fix that?

You need to use ts-jest.
Install ts-jest: npm install ts-jest -D
Update your jest config to use: preset: 'ts-jest'
You still run your tests the same way - just run jest.

Related

How to ignore .stories.tsx file on COPY command in dockerignore?

I have a reactjs app that I want to dockerize, but when I try to run:
yarn install --production
and when I try to build it with
yarn build
It comes up with this error
TS2307: Cannot find module '#storybook/react' or its corresponding type declarations.
3 | import React from 'react';
4 |
> 5 | import {ComponentStory, ComponentMeta} from '#storybook/react';
| ^^^^^^^^^^^^^^^^^^
6 |
7 | import Button from './Button';
8 |
I'm able to solve it by putting #storybook/react": "^6.4.22 in the dependencies instead of devDependencies
Is there any way to ignore all files with .stories.tsx format in dockerignore file or ignore those file format when building the app?
I've tried **/*.stories.tsx, **.stories.tsx but the file still copied inside the WORKDIR

Getting a filename from react-scripts build?

I am using yarn to run react-scripts build on a private Typescript repository. The build fails with the following message:
yarn build -v
yarn run v1.22.17
$ react-scripts build -v
Creating an optimized production build...
Failed to compile.
TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'.
Type 'undefined' is not assignable to type 'string | number | boolean'.
114 | withCredentials: true,
115 | headers: {
> 116 | Authorization: token ? `Bearer ${token}` : undefined,
| ^^^^^^^^^^^^^
117 | },
118 | });
119 |
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I understand the error, but I cannot find what file the error is in because react-scripts build doesn't seem to output the file name? I'm not sure if this is a problem with my local configuration but is there a way to get react-scripts to tell me where exactly this error is?

Error on starting react app bootstrapped with create-react-app

I got this weird error on creating react app using create-react-app command
as stated in documentation I uninstalled globally uninstalled create-react-app as well but nothing seem to be working. There is work around by reducing the react-script version to 4.0.1 or older but I don't want this. Aren't there legit method to solve this problem. The error is:
./src/index.js 1:123
Module parse failed: Unterminated string constant (1:123)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('E:/Study Material/myProjects'/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|
It looks like there is an unfinished string in your command in the Line:
$RefreshRuntime$ = require('E:/Study Material/myProjects'/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
It should probably be:
$RefreshRuntime$ = require('E:/Study Material/myProjects/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
Remove the 'after the /myProjects
Let me know if it worked! :)

How to get a code coverage report with react-create-app?

If I run
npm test --coverage
the tests pass, but the coverage is not run.
When I change package.json to have
react-scripts test --coverage
Then, when I do npm test and a it runs the tests but not the coverage
The tests run along with the coverage report but the coverage shows all zeroes for coverage
PASS src/components/Header/SubHeader.test.js
The <SubHeader /> component
✓ should render (4ms)
✓ should render with a goback button (1ms)
✓ should render
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 3 passed, 3 total
Time: 1.077s
Ran all test suites.
Finally, I realized that I can do
npm run test .
Question: Why don't the other methods work?
After revisiting this question i figured out that if you run this you will trigger coverage command and get all results.
SOLUTION 1
npm run test -- --coverage .
When you are passing arguments to npm script, you need to add -- before adding arguments like --coverage. This is just how npm works. See this answer for passing arguments to npm
SOLUTION 2
yarn test --coverage .
EDIT:
I asked a question regarding . being passed down the command and answer is pretty much simple. . is passed because it is a positional parameter, in contrast to --coverage that is option for npm test command: Why is . passed as argument to npm without -- delimiter?
---- Problem analysis ----
PROBLEM 1
npm test --coverage you are not passing --coverage argument to test script.
In the other case when you edit script to be:
react-scripts test --coverage and run npm test here you actually add argument --coverage, but in script itself, not from npm command
PROBLEM 2
When you do npm run test . you are passing . that means you want to include all files in this command.
For some reason . is passed to the npm run test script but not --coverage.
On the other side yarn passes all arguments without --.

You don't seem to have a generator with the name angular installed.? [duplicate]

This question already has answers here:
generator-angular module is not creating a new project
(2 answers)
Closed 6 years ago.
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$ yo angular
Error angular
You don't seem to have a generator with the name angular installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 0 registered generators run yo with the --help option.
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$
yo doctor a great helper:
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$ yo doctor
[Yeoman Doctor] Uh oh, I found potential errors on your machine
[Error] NPM root value is not in your NODE_PATH
[info]
NODE_PATH = /usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript
NPM root = /home/fabian/npm/lib/node_modules
[Fix] Append the NPM root value to your NODE_PATH variable
Add this line to your .bashrc
export NODE_PATH=$NODE_PATH:/home/fabian/npm/lib/node_modules
Or run this command
echo "export NODE_PATH=$NODE_PATH:/home/fabian/npm/lib/node_modules" >> ~/.bashrc > && source ~/.bashrc
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$ echo "export >> NODE_PATH=$NODE_PATH:/home/fabian/npm/lib/node_modules" >> ~/.bashrc > && source ~/.bashrc
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$ yo doctor
[Yeoman Doctor] Everything looks alright!
and now everything works:
fabian#fabian-SATELLITE-C660:/var/www/front-end/my-new-project$ yo angular
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
Probably you installed with sudo, so:
sudo yo angular projectname

Resources