I'm using react with ViteJS and Vitest for testing. I have set up the config for vitest and the test setup file too as you can see in the screenshots below.
vite.config.js
src/test/setup.ts
src/app/App.tsx
src/app/App.spec.js
here's the error I'm getting:
I found a lot of sources on similar issues about the topic but nothing I tried worked. I also followed the documentation for the vite config and a lot of articles too. Everyone is saying the same thing but I'm still getting this error for some reason.
I used the same config with jest and it worked fine. But in this situation, I got stuck and then tried to rename the filename to .tsx or .jsx instead of .ts or .js. After that, I re-ran the test file and everything started working.
I think you forgot to add #testing-library to vite.config.js alias object.
This might be obvious to most people but in my case the issue was that the test file also has to end in ".jsx" when trying to test a ".jsx" file.
App.test.jsx worked for App.jsx
Related
I have a very serious issue right now trying to use Next js. No matter what version I use, any time I try to run the npm run dev, I get the following error:
error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'C:\Usersudbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\client\dev'
error - Error: Cannot find module 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\.next\fallback-build-manifest.json'Require stack:
This is literally right after running the create next app command, so I don't install any additional package. One thing realized though is that this error doesn't occur when I use the public folder on my window PC but when I use the user folder called udbasili I get the above error. I have been using next.js for a long time and this is the first I am seeing this error
I had the same issue
the problem was that my project files was in a folder beginning with "ud". My folder name was "udemy".
Renaming that folder or moving the project outside that folder solved the issue
If you compare the paths, there is a missing '\' :
C:\Users**\\**udbasili\Documents\Programming\Acumen Developers\...
C:\Usersudbasili\Documents\Programming\Acumen Developers\...
A quick solution that I gave to this issue was to create the project on a different path. For example:
C:\dev\myportfolio
Please head over to https://nextjs.org/docs/messages/swc-disabled
By disabling swc in next.config.js it will resolve your issue.
You can disable swc by adding:
experimental: {
forceSwcTransforms: true,
}
It's possible your autoimport included '/dist/client/dev' in the 'next/amp' path.
Does it work if you import { useAmp } from 'next/amp'?
I used Create React App to make a new project, and now i try to implement each feature i will need.
I am facing an issue i dont understand while trying to configure jest with reactjs.
One my node_modules, react-dotenv break jest test.
If i try to copy/past the issue line import env from 'react-dotenv'; directly in the root tested file Login.tsx there is no error.
I tried to configure moduleNameMapper and search around without success..
I dont understand the problem, what am i missing?
Ok, i was missing mocks and transformIgnorePatterns
Didn't really make transformIgnorePatterns working using:
transformIgnorePatterns: ["node_modules/(?!react-dotenv)"],
but the mocks
moduleNameMapper: {
'^.+\\.(css|scss)$': '<rootDir>/__mocks__/CSSStub.config.js',
'react-dotenv': '<rootDir>/__mocks__/react-dotenv.tsx'
},
did the job.
I am using React, TypeScript and Snowpack in a project. I am facing issue in path mapping.
This is the folder structure in my project:
tsconfig.json
snowpack.coonfig.js
App.tsx
This is the error I am getting:
Can anyone please help me fix this? What am I missing here?
If in App.tsx, I ctrl+click on HomePage import, it takes me to that page but when I run yarn start, it gives the above error.
You might need to add 'app' alias to snowpack config too so it recognizes it.
https://www.snowpack.dev/reference/configuration#alias
I'm totally new to React...how do I convert a .jsx file to .js?
I tried to use Babel via CLI but the command doesn't even work:
babel --plugins transform-react-jsx board.jsx
I also tried replacing "babel" for "npx" in the above command, but it always retuns "Path must be a string. Received undefined".
I ran the code in the folder and also trying to pass the path, but none worked.
Does anyone have a tutorial, working example or can help me to make this work?
Link with .jsx file I want to compile:
https://github.com/atlassian/react-beautiful-dnd/tree/master/stories/src/board
I don’t think that main point of stackoverflow is to provide how to guides which could be googled in 5 seconds on google. But here you have a link https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
I built an app that borrows heavily from Dan Wahlin’s Angular-Jumpstart app, It works when I run it using his ‘npm start’, which looks like this:
"start": "tsc && concurrently \"tsc -w\" \"node server.js\"
I then used Visaul Studio 2017 to build the ‘ASP.NET Core + Angular 2 template for Visual Studio’ app referenced by Scott Sanderson in his blog post by the same name. This ASP.NET Core/Angular 2 sample app of his uses Webpack, Server-side rendering, and HMR. It too works fine.
However, I want to add some of the code I created for the Dan Wahlin app into the Scott Sanderson app, and I am running into a moduleId-related error. The following is an example of the error message I receive:
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: moduleId
should be a string in "FilterTextboxComponent". ...If you're using Webpack
you should inline the template and the styles...
To resolve this I have tried:
Removing the moduleId variable from the component(s) in question
Setting the moduleId varaible in this manner:
moduleId: module.id + ''
I have looked here and elsewhere and have not been able to determine what I need to do to resolve this. Is it a Webpack bug? Am I overlooking something I need to do?
I am happy to provide more information if you think that would help you help me!
I figured out what was happening...
I would edit the #Component metadata by removing the reference to moduleId in my .ts file and save it, but for some reason Webpack was not transpiling the .ts file into a new .js file. It was just bundling and serving the old .js file.
As to why? ...I think that Webpack uses the .js files when they are present, but will generate its own when they do not exist.