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.
Related
So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
I'm using create-react-app with typescript. I don't want typescript to stop the javascript execution when a typescript error is caught, I want to get warned in the console but I don't the UI to be interrupted.
is it possible to configure tsconfig in such a way?
To do this with create-react-app, you can edit your .env file to have the following:
TSC_COMPILE_ON_ERROR=true
For information on advanced configuration of create-react app, see this page.
Has anyone gotten jsdom working in a production react build purely for the frontend (browser)?
Background Info
I got jsdom working for a create-react-app in a dev environment. It's being used to parse an html output that the user creates through a Richtext editor.
Issue
The app is not able to be built for production due to whatwg-url failing since it requires ES6 syntax for Object.defineProperty to work.
Hoping to avoid creating my own regexp's for selecting these html nodes.
Replication:
npx create-react-app my-app; cd my app; npm i jsdom;
Make a file that calls new jsdom and parses a html string
Run npm run build notice the app fails.
Answering this myself. Short answer, do not use it. There is something called DOMParser which does something similar to JSDom.
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.