Setting up testing for React apps and the native Fetch compatability with Node.js
Testing is crucial to making applications maintainable and scalable. I go over my preferred methods of testing. Node.js finally has the native fetch global API available.
🗞 News
Nodejs version 18 is finally available. The global fetch API is now available by default. Note that this feature is experimental and most likely subject to change in some way or another in the coming months.
This also means that several globals are made available so that fetch work to its fullest: fetch
, FormData
, Headers
, Request
, and Response
.
Additionally, there is now a native test runner (also experimental):
test('top level test', async (t) => {
await t.test('subtest 1', (t) => {
assert.strictEqual(1, 1);
});
await t.test('subtest 2', (t) => {
assert.strictEqual(2, 2);
});
});
Check out the full changelog here.
Lexical by their own words is a:
…extensible JavaScript web text-editor framework with an emphasis on reliablity, accessibility, and performance.
Here is a playground to check out:
https://playground.lexical.dev/
From trying it out it seems super easy to use. If you need a rich-text editor I would definitely look at this option.
The native HTML dialog component is getting more support across all browsers. The team behind web.dev has released an article and video going over how to implement it in the most accessible way.
💡 Learning
I’ve been asked quite a bit recently how to do thorough testing in a React application. First, there needs to be two definitions set (as this can be quite controversial).
End-to-end test: Testing the functionality of an application under the most production-like circumstances. In our case, this means compiling, building, and running the app inside a browser-like environment and going through different user flows
Unit test: a testing method for an isolated and individual piece of code, a unit. In the context of React, this more than likely refers to testing our components in isolation and any associated functions.
My tools of choice in this case: Cypress for end-to-end testing and Vitest for unit tests. And to mock services for both tests I use MSW.
I’m creating a series of articles to create useful tests and implement the testing process in the entire workflow.
Check it out here.
📦 Additional Resources
âš› React
🔧 Other