We have bootstrapped a create react app project using typescript and use react-testing-library for our unit tests.
We have noticed that, as we have updated our props and types, tests are still running and passing which is very worrying indeed.
As an example, we have a className which is a typescript DU. The test is using an unexpected value for className which this screen shot shows:
But the test still runs and show as as successful. If I open the VS CODE problems tab, it correctly shows as an issue:
The question is, why is the test still building and passing, is extra configuration needed to get typescript errors to work with jest/react-testing-library?
I would like these errors to prevent tests from running in the first instance to highlight an issue with props.
This is just one example, we have other tests were required props are completely missing yet the tests still run and pass
Applies to react-scripts 3.4.1 and 4.0
A colleague has kindly but together an example repo on github
One option is to run the TypeScript compiler to check the types before running the tests. For example, update the "test" script in package.json to:
"test": "tsc --noEmit && react-scripts test",
Related
starting from some point recently, my React compiling doesn't fail on the obvious typescript error, it has been working for a long time, and I forgot what config matters, does anybody have a clue?
As the screenshot shows, I updated the parameter type with a new field, VS code actually captured the missing field, but ReactJS still let go, I definitely want it fails the build so that I can fix all places accordingly.
# yarn start script
"scripts": {
"start": "react-scripts start",
(note: I didn't upgrade reactjs or typescript versions recently)
The official introduction React Testing Library | Testing Library links to a tutorial page React Testing Library Tutorial. In the tutorial it says "After running your test on the command line, you should see the HTML output of your App component". First of all, what tf does this the command mean?? I thought, but anyways I tried npx jest, got an error as the title, the detailed error as the below:
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
I guess the tutorial is for create-react-app users maybe, but I don't use it and I'm on Webpack. Even if I needed to do something to get the thing working, I have no clue what I need to do on my package.json/.babelrc/webpack.config.js etc, because the intro/tutorial didn't clarify it.
So, 1. What can I do to make the thing working? 2. Is there a decent official/non-official step by step doc/tutorial?; Thanks.
I have a React 17 / Typescript 4.5 project. package.json looks like this:
...
"scripts": {
"start": "react-scripts start",
"build": "yarn run tsc --build"
}
My code has some Typescript errors that don't cause issues at runtime. When I run react-scripts start, the code builds and runs successfully in the browser, and React turns the errors into warnings that show up on initial page load. Conversely, when I run yarn run tsc --build, I can't compile the project due to the errors.
Yes, of course I should fix the errors, and I will. But while my code is rapidly evolving, solving certain tricky Typescript problems is premature. It may be useful to compile the code and temporarily ignore the errors.
I realize I can turn off specific errors in tsconfig.json, but I'd like to temporarily ignore all errors (at least, ones where Javascript can still be emitted).
Basically, what I want is a tsc flag that turns errors into warnings, but according to this related question, that doesn't exist. So how does react-scripts manage this? How can I compile my project in spite of the errors?
react-scripts uses a webpack plugin called ForkTsCheckerWebpackPlugin (see this line), which runs TypeScript type checking in a separate process and isn't actually used to transform your code from TypeScript to JavaScript before you run it. Instead, it looks like create-react-app uses #babel/preset-typescript (see this line), which doesn't perform any type checking but rather transpiles your code from TypeScript to JavaScript, so that's why your code is still able to run with TypeScript errors since Babel doesn't actually do any type checking with your code.
I'm trying to work with Cypress and Storybook for visual testing in a React Typescript project.
The main goal is to render all my components library with Storybook and then visit them through Cypress and have the code coverage in order to pass it to SonarQube.
The problem is the instrumentation with Storybook, I have found no mentions about it. For example I run my server with the following script : react-scripts -r #cypress/instrument-cra start
The "-r #cypress/instrument-cra" will generate the coverage files while Cypress runs and it works great.
Then with Storybook : start-storybook, it run but no code coverage is generated because the app isn't instrumented.
I wish i could do something like : start-storybook -r #cypress/instrument-cra but the "-r" argument is part of react-scripts and I don't know how to reproduce with Storybook.
Is there an another way to get it working, or do I have missed something after hours or searching ?
You need to add babel-plugin-istanbul to the babel config that storybook is using.
Essentially recreating what instrument-cra is doing:
https://github.com/cypress-io/instrument-cra/blob/master/index.js
I'm having a most unusual and frustrating problem.
I have an Ng2 component called via-date-picker that I am trying to NPM publish so that it can be easily used in other projects. In order to do so, I have made it into an Angular2 component library. The via-date-picker exports a module called ViaDatePickerModule, which I want to import elsewhere.
In order to test and make sure that it is being published correctly, I am NPM-installing and importing it into an otherwise empty Angular-CLI project that I am calling npm-test.
So I run my npm-test application using "ng serve", and I get this error:
ERROR in ViaDatePickerModule is not an NgModule
webpack: Failed to compile
Yet despite that error, the project compiles anyway:
And when I open up my project, lo and behold, everything works!!
But this only happens the first time that I run the project. On successive attempts to run the project via "ng serve", I get the same compilation error, but this time the project just flat-out refuses to complete it's compilation:
I have no idea why I'm getting this error, and why Angular-CLI will run my project sometimes but not others.
I've scoured the web for answers and tried every solution I can find for this error, as well as every other thing I can think of:
I've tried adjusting the tsConfig settings in my component library
I've tried using rollup.js instead of gulp.js to build my component library
I've tried copying existing, working component libraries, then carefully swapping out the existing code for my own
I've downgraded Angular CLI
I've upgraded Angular CLI
I've downgrade Typescript
I've upgraded Typescript
I've deleted and re-installed node_modules several times
I've deleted and re-started my whole project twice
No matter what I do, I keep coming to the same webpack error that I posted above; that ViaDatePickerModule is not an NgModule. I'm completely out of ideas. Any help that anyone could provide would be crazy helpful.
For the sake of complete thoroughness, I've created a public repo on github here containing all the files involves, divided into two main directories:
COMPONENT_BEFORE_PUBLISHING: contains the component library from which I am running "npm publish"
WHAT_IS_IMPORTED_INTO_NODE_MODULES: contains the resulting directory that is being imported into the node_modules directory of my npm-test project
Again, any help that anyone could provide would be extremely, extremely appreciated! Really, I would be eternally grateful.
If you are %100 sure that ALL of your consumers will import your components, modules ...etc from a TS project such as angular-cli. You can publish your TS source directly without transpiling. Ie. you'll be publishing static .ts files that can be imported in any project that will do the transpiling for you.
However, if your want your library to also be consumed as a JS es5 or es6 module, then you should transpile.
Also, you can try the angular compiler ngc instead of the typescript compiler tsc? ngc is a wrapper around tsc. You could start there, There are many library starters put there that can help you start an angular library and get it optimized for AOT compilation.