Forem: Paula Penedo (she/her)

Testing Next.js 13 App Router architecture is... complicated

Paula Penedo (she/her) — Wed, 13 Sep 2023 16:02:19 +0000

I've been trying to get back into coding daily and decided to start a side project using Next.js 13 new App Router architecture — instead of the previous Pages Router.

The first red flag 🚩 I noticed was that there's no Testing documentation on the App Router docs. The second red flag 🚩 was that none of the examples in their GitHub repo, including the with-jest template updated in the first week of September 2023, has any examples of testing React Server Components which is the new paradigm the Vercel team is using in the App Router architecture.

When trying to test a RSC, React Testing Library throws an error NEXT_RSC_ERR_CLIENT_IMPORT as seen on this issue from May 2023. The Next.js team posted in early September 2023 that the canary version v13.4.20-canary.16 fixes this error.

I've installed this canary version, and now the RSC I'm trying to test are returning Objects are not valid as a React child (found: [object Promise]). Yep, that's right: React Server Components can be async. They are safe to be async since they render on the server.

If you want to know more about React Server Components, I recommend checking Josh Comeau's excellent post about it: https://www.joshwcomeau.com/react/server-components/

Who isn't ready yet to test rendering async components? React Testing Library.

As more and more people jump in the Vercel hype train, RTL maintainers had to come with workarounds to support that while they try to reach the Vercel team to work together in a solution. Having an issue created in May 2023 without any response or emoji reaction from the Vercel team is unsettling.

The bottom line is that Vercel promoted to stable a "meta-framework" that comes short when handling unit testing coverage. I spent a day searching GitHub issues and connecting the dots from different repositories.

No one is warning developers about it or explicitly recommending creating or enhancing their end-to-end tests using Cypress or Playwright if they want to test their components. However, that's the solution maintainers are giving to their users.

DX in detriment of quality?

What kind of message do meta-frameworks and libraries give to developers when they do such a thing? We already have non-semantic and inaccessible code propagated everywhere in docs, courses, and presentations.

We should worry about the code we put as a standard in our documentation and examples. Web semantics, accessibility, and testing should be part of the Definition of Done (DoD) of every code we write, not an afterthought.

Jest JSDOM data-attribute

Paula Penedo (she/her) — Fri, 14 Aug 2020 03:37:18 +0000

When using Jest with JSDOM to test HTML elements, it's common to try to use or access the data-attribute. The problem is that it doesn't work.

The solution is quite simple: getAttribute / setAttribute.

element.setAttribute('data-food', 'taco');

element.getAttribute('data-food');
// returns 'taco'

Change the text color of an input field with an autocompleted value

Paula Penedo (she/her) — Thu, 30 Jul 2020 22:00:59 +0000

Webkit-based browsers have some CSS properties that are only accessible with the -webkit- prefix. One of these properties is -webkit-text-fill-color. It sets the color for the input field even when your browser uses autofill feature. You may have encountered something like this:

This is your browser telling you that this information was autofilled by it.

-webkit-text-fill-color has a higher hierarchy in the Cascading than our regular color, even if you use important. So if your input has a color different than black and you need to overwrite the browser's default, you may want to use -webkit-text-fill-color.

Example

input {
 color: #000;
 -webkit-text-fill-color: #000;
}

Resources

Learn more at the MDN Documentation.

Angular 8 and IE 11

Paula Penedo (she/her) — Thu, 29 Aug 2019 18:33:36 +0000

It's a funny thing that my first post on Dev.to will be about Angular, a framework that I have close to zero experience.

I've switched careers early 2010, after a few years working with advertising and marketing, so I didn't catch the breaking change on the web development world with the rise of frameworks like Backbone and Angular. My first job working with the web was all about WordPress themes and the beloved jQuery (which I really miss).

Anyway, sorry for the little detour and onto what really matters! On the previous versions of Angular, we had to install core-js and import a bunch of its features/helpers, making your polyfill.ts look like this:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';

Angular 8 comes with core-js installed by default. It will be added to our bundle only if we tell Angular to do that.

How do we do that?

1. `tsConfig.json`

 // the default configuration
 "target": "es2015"

 // the change
 "target": "es5"

2. `polyfills.ts`

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js'; // Run `npm install --save classlist.js`.

3. `browserslist`

 # the default configuration
 not IE 9-11

 # the change - remove the "not"
 IE 9-11

Bonus tip

If you are going to use SVGs sprites and the tag <use>, IE 11 will complain about it too. Luckily there's a lib to solve that, the amazing svg4everybody. Add it to your polyfills.ts:

/** IE10 and IE11 requires the following for external source of SVG when using <use> tag */
import * as svg4everybody from 'svg4everybody';
svg4everybody({ polyfill: true });

Feel free to drop a comment if you have any other tips and strategies for developers working with Angular 8!