I am working on a react based frontend app that I am unit testing using mocha / enzyme.
The stack includes webpack, react, mocha + enzyme for testing, and firebase for auth / db / etc.
When I try and run npm test I get the following error due to firebase:
WEBPACK Compiled successfully in 3412ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'stringify' of undefined
at Module.eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:31:308)
at eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:136:30)
...
npm ERR! Test failed. See above for more details.
What could be causing this error? This didn't happen before I imported firebase. Is there a webpack config I should tweak?
So, I've just figured this out. It seems to be an issue with how the tests are being loaded, causing the firebase package to be loaded in "web" mode even though the mocha test process is building in "node" mode... or something like that.
Anyways, here's the link that helped me solve this issue: https://github.com/firebase/firebase-js-sdk/issues/1455#issuecomment-455712500.
Essentially, ignore node modules (specifically firebase) when bundling.
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.
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 this Error: Webpack Compilation Error, after trying to import a component into my cypress test spec
am on React version 17.0.0 and React-dom v17.0.0
What might be causing this?
here is the image of the error
You can see your webpack logs by running cypress when [documenting][1] in debug mode
[1]: https://docs.cypress.io/guides/guides/debugging#Print-DEBUG-logs
Mac/Linux
DEBUG=cypress:* cypress run
Windows
set DEBUG=cypress:*
cypress run
Everything you do in Cypress is logged in,
one of which is cypress:webpack, which can give you the full message.
And Also please try, adding an empty .babelrc file to the cypress roo directory allowed me to work around this issue.
cypress/.babelrc
{}
When i run yarn test locally on my React project i get this error (project is created with Create react app):
Cannot find module <project_directory>node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/interopRequireDefault
Everything was normal and after adding react-responsive package, my tests started failing like this.
Even though they show that they fail, when i choose to run only failed tests, they don't run again. It's like they failed in their own way but not concerning the test process.
On the side note, when my tests run on CI/CD pipeline, they work with no problem.
After taking into consideration that CI/CD pipeline test run succeeds, i got to thinking that it could have to do something with my local environment.
Solution is to first clear cache in tests and than run tests again:
yarn test --clearCache
And that run
yarn test
NPM variant:
npm test -- --clearCache
And everything works fine now.
I found out on this issue that regards on a similar error but for a different module.
This answer gave me a solution
Issue in on create react app repo
I have a react project in this git repo created from scratch without using create-react-app, so I am using jest.config.js and jest.setup.js files as suggested by msw doc for mocking network request for testing. I get the below error when I executing the test.
(node:12207) ExperimentalWarning: The fs.promises API is experimental
console.error
Error: Error: connect ECONNREFUSED 127.0.0.1:5000
The same test code works fine when I create a new project using create-react-app containing setupTests.js, but I want to mock api request in a react project which was created manually from scratch.
Any suggestion?
In the tutorial for msw, the mock server is configured in setupTests.js.
Because CRA (create-react-app) already configure jest for you and CRA will load setupTests.js when you run test with react-scripts test.
If you want to create a new project from scratch (supposed you already installed react, react-dom, ... ).
You have to config jest your self (refer this docs), steps needed:
Change test scripts in package.json to jest
Install dependencies (babel, preset for jest, etc)
Config jest with jest.config.js (like you did, i also add jsdom as test environment)
Setup jest.setup.js to load mock server
I created a PR that did above steps for you, to test just run
npm run test App.test.js
Output: