How to do test in React and Node? - reactjs

I am building a full-stack app with React and Express and I want to ask you something. I decided to improve the app I want to do a test. And what library should I use? I heard about jest or something like that to test React Component but maybe exist a modern solution. To test in express Mocha will be good or again any modern solution exist?

Testing React
There's a bunch of example Testing Recipes for testing rendering, data fetching, events and much more using Jest.
Testing Express.js
I generally recommend Mocha for most of JS unit testing, incl. Express' routes and expected results. Have a look at Express' own Mocha test set for examples.
What to test?
Well, you should test as many methods as you can. Critical methods first. Test them for returning what they should, and not returning what they shouldn't. Also test how they behave given extreme values, undefined values, etc. Check if they throw the right errors when needed.
When using authentication, ALWAYS test your routes to throw appropriate errors (like 401 or 403) for unauthorised access or insufficient privileges respectively.
If not sure what to test, spend some more time reading about testing strategies :-)

Related

How to integration test calls to the ExpoSDK APIs

My app makes calls to Expo SQLite for data persistence.
I have good unit test coverage for my business logic.
I want tests to make sure my calls to the Expo SQLite API as well as my SQL queries are functioning correctly in edge cases.
I've considered:
Snapshot testing seems to be very coupled to logic inside React components. And don't have access to ExpoSDK APIs.
E2E testing with Appium and Selenium seem more focused on how the UI looks.
I could make mocks for ExpoSDK modules, but this involves a lot of effort and potential maintenance that is sort of tangential to testing. Also this approach causes coupling the the implementation of my classes instead of to the result/business rules.
I'm imagining a testing framework that will run my tests on a mobile simulator, and make a React Native View that displays the test results. Similar to what Mocha does in the browser. Is anyone aware of such a testing framework for React Native?

ReferenceError: crypto is not defined

I am testing my React app and when it runs a test that executes the Web Cryptography API, specifically await crypto.subtle.generateKey I get the following error message
ReferenceError: crypto is not defined
It seems as if React Testing Library didn't have access to the library, which makes sense, since this is an API native to the browser, and React Testing Library simulates a library.
How can I add the library so that the test passes? Following the TDD principles, I shouldn't modify the code so that it passes the test.
As #Jayce44 suggested you can just add a mock to the window object. It is a good pattern to erase any random component in your tests anyway (especially in TDD). Defining a fake/mock crypto module where you define the output of it based on the test case has many benefits to write solid test cases.Depending on the framework you are using this could look something like:
beforeEach(() => {
setupCryptoWithExpectedValue(42)
});
test(() => {
productionCodeUsingCrypto()
}
I met the same problem as you, but in fact he is not a problem。
because this API can only run in localhost and HTTPS environments.
therefore, the scenario where you make an error may be running in the HTTP environment

Why is it a bad idea to use React Directly in HTML (not in a react enviroment)?

I'm learning react. W3schools says (in this link):
The quickest way start learning React is to write React directly in your HTML files.
This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.
So my question is : Why?
To avoid runtime react code compilation into Javascript which may consume lot of memory.
Your Browser do not understand React but JavaScript and when you are providing the babel to transpile your code, its not efficient and memory performant. So to make your app performant its advisable to create a bundle first and then deploy it to your webapp.
For learning purposes you can try developing an app by passing babel/react links and after sometimes you will surely feel that your browser starts hanging etc.

What can I use for mock fetch-requests while e2e testing in protractor similar to addMockModule without Angular

I am writing e2e test with protractor for a typescript module. I want to use protractor for the additional features in comparison to selenium webdriver. I am using typescript standalone so I am building a non-angular application.
I searched a lot for mocking services or fetchmock etc. But I think I am searching at the wrong place. Maybe I just didn't understood what do I really need for my problem.
At the moment I have an application where I want to test the frontend. My problem is, that the application only works with a server which is setting up many data and make it available for rest. Without this server my javascript file wont work and I wont start the server for my tests, it must be server independent.
For example: my server provide the data on a specific address 192.168.1.230 and I can fetch the data with fetch api over: 192.168.1.230/users/1.
In unit tests I have mocked my fetches, but in e2e tests I need to mock the address (maybe with selenium webdriver) and want to get a dummy response if my api is fetching this data.
How can I realise that? I use protractor with npm (nodejs) and could need a npm plugin for this.
I saw another post here with the addMockModule, but this is only for angular modules and I don't use angular.

Detect if the environment is Protractor

In an AngularJS application is it possible to detect if the environment is Protractor?
I would like to disable certain functionality such as Geolocation when running my tests. It's not something I want to test at the moment and I am pretty sure it is what is causing my tests to fail to run.
In my App I use window.jasmine to disable certain polling actions when running Jasmine tests so something similar would be good.
i.e.
if(!window.protractor) {
geoLocationRun()
}
This doesn't work and there doesn't appear to be anything I can use on Window.
Note: I know I can mock out the geolocation which I can do if this isn't possible. Perhaps this is the best approach in any case however it would be good to know if there is a suitable solution. How do I enable geolocation support in chromedriver for Selenium?
I would recommend you to move your geo location code into an angular module. Then you can mock the module in your protractor tests using browser.addMockModule
http://angular.github.io/protractor/#/api?view=Protractor.prototype.addMockModule

Resources