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.

Dominic Gannaway @trueadm

Lexical is now open-source! 🎉github.com/facebook/lexic… None of this would have been possible if it wasn't for the awesome team that work on Lexical full-time! I hope folks get a chance to play around with what we've spent the last 18 months building.GitHub - facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performanc…Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. - GitHub - facebook/lexical: Lexical is an extensible text editor framework that p...github.com

April 13th 2022

460 Retweets2,494 Likes

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.

Adam Argyle @argyleink

🆕 #GUIchallenges Thinking on <dialog> components how to add animation, events, light dismiss and more! Blog's got all the details web.dev/building-a-dia… YouTube overview youtube.com/watch?v=TD1Qxl… GitHub source github.com/argyleink/gui-… Try it gui-challenges.web.app/dialog/dist/

April 13th 2022

70 Retweets460 Likes

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

• Build a progressive web app with React 18

• Understanding the differences between props and state in React

🔧 Other

• You can automate more than you think

• Web scrapping declared legal in court

• Guide to using the terminal for front-end developers