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
Related
What is the best way to test routing in a NextJS app? I am using it as a static site generator and am not really using any server-side rendered capability. How do I test routing for the entire application? Ex, let's say my site starts on the route /first-route and I fire an event that changes the route to /second-route. How should I test that? I am trying to use Vitest and React Testing Library. I would really appreciate any guidance!
It's tricky. You may want to consider using something like Cypress for these tests as they are more like end-to-end tests.
You may get away with a tool like next-page-tester - though in my experience that causes more problems than it solves for complex apps.
But if you just want to test that something happens when the path changes, I've had good results with next-router-mock. There's plenty of options available in their docs, but a simple example might look like this:
import mockRouter from "next-router-mock";
describe('tests', () => {
it('changes the url', () => {
mockRouter.setCurrentUrl("/pizza");
})
})
I wish to use this "https://www.npmjs.com/package/#vitalets/google-translate-api" library in React but the the instructions say I need to "const translate = require('#vitalets/google-translate-api');". This doesn't work in React.
If I try import {translate} from "#vitalets/google-translate-api/index"; I get "Critical dependency: require function is used in a way in which dependencies cannot be statically
extracted"
How can one use a library like this in React?
Google translate API is for node.js, meaning your backend
You're looking for Google Translate Open API or Translate Google Api probably ? But the first package seems to be broken and they both seem to not be used/downloaded often
When you're downloading, make sure it can be used with ReactJS/js in general on the frontend
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 :-)
I'm a newbie when it comes to unit-testing, I've tried to do a unit-test with Karma and Jasmine from an app that already existed.
Basically the app has a lot of dependencies from different third-party libraries being used. So when I tried to create a unit-test a stumbled upon a lot of errors from Karma/Jasmine. One of them is the screenshot below:
From the screenshot, I'm getting an unknown provider: socketFactoryProvider, which I've traced down and found out that it belongs to the btford.socket-io module. So what I've did was to have a code like this to mock the dependencies:
// Set the app module
beforeEach(function () {
angular.module('btford.socket-io', []);
module('opensportsAdmin');
});
But I'm still getting an error (based on the screenshot).
So my question is, how can you work with third-party libraries for your unit-test? I'm kind of new and didn't find any articles that can help me with my problem.
Here's a reference to my code.
The best practice is to use one internal module for your app and one module for dependencies.
detailed explanation and example here:
Truly mocking providers
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