DEV Community: Jen C.

Security - Solving the "Content Security Policy (CSP) Header Not Set": style-src

Jen C. — Thu, 19 Jun 2025 07:38:22 +0000

Resources

Content-Security-Policy: default-src directive

Content-Security-Policy: style-src directive

Background

Inspect the codebase for all current usages, and based on the findings, either adjust the value of style-src accordingly or update the codebase to a more secure implementation, then update the value of style-src.

Style usage in the project

Inline style property

...

<div
    className={background.className}
    style={{
        backgroundImage: `url(${background.url})`,
    }}
/>

...

Unsafe inline styles

...

return (
    <>
      <Head />
      {isiOS && (
        <NextHead>
          <style>
            {`
              html,
              body {
                height: 100vh;
              }
            `}
          </style>
        </NextHead>
      )}

    ...

    </> 
...

Styles that are applied in JavaScript by setting the `style` attribute directly or by using `cssText`

For example:

document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";

NOTE: our project does not have this

Style properties that are set directly on an element’s `style` property.

const Drawer = ({ open, onClick }) => {
  useEffect(() => {
    document.body.style.position = open ? 'fixed' : 'static';
    document.body.style.width = open ? '100%' : 'auto';
    document.body.style.overflow = open ? 'hidden' : 'auto';
  }, [open]);

...

Step-by-step guide

Set the Content Security Policy (CSP) header to include:

style-src 'self' 'nonce-${nonce}';

Dynamically generate a nonce and set it in the x-nonce response header. For example, in Next.js middleware:

...

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const cspHeader = `
    default-src 'self';
    style-src 'self' 'nonce-${nonce}';
`;
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim();

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  );

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  );

  return response;
}

In the code that uses unsafe inline styles, retrieve the nonce value from the x-nonce request header and set it as the nonce attribute on the <style> element.

For example, the unsafe inline styles:

...

return (
    <>
      <Head />
      {isiOS && (
        <NextHead>
          <style nonce={nonce}>
            {`
              html,
              body {
                height: 100vh;
              }
            `}
          </style>
        </NextHead>
      )}

    ...

    </> 
...

However, according to 'nonce-'

If a directive contains a nonce and unsafe-inline, then the browser ignores unsafe-inline.

Since our project heavily relies on inline style properties, we need to refactor the code to use class names in order to resolve this error.

However, many of these inline styles depend on JavaScript variables at runtime, making it impractical to convert them to class names. For example:

 <div
      data-testid='detail-meta'
      className='detail-meta'
      style={{
        minHeight: isArtist ? '14vw' : 'auto',
      }}>

      ...

  </div>

Therefore, we set the style-src directive to 'self' 'unsafe-inline' instead of using a nonce to resolve this issue.

Further thoughts

What happens if we remove `default-src` and do not add any fetch directives?

For example, if we remove default-src along with style-src, style-src-elem, and style-src-attr from the Content-Security-Policy headers.

Removing default-src and using wildcards for other directives fails to resolve the Content Security Policy (CSP) Header Not Set error and the complex style-src issues. In fact, it causes additional problems:

CSP: Failure to Define Directive with No Fallback
CSP: Wildcard Directive
CSP: style-src unsafe-inline
Content Security Policy (CSP) Header Not Set

What happens when the directive values `'unsafe-inline'` and `'nonce-${nonce}'` are set together?

Get the error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-MjNjZTAzNDEtYWMxMC00OGViLTg5NDYtZjMxOTg0ODg2MjVm'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

As shown in this image:

To resolve this issue, remove either 'unsafe-inline' or 'nonce-${nonce}' from the directive.

Security - Solving the "Content Security Policy (CSP) Header Not Set": frame-ancestors directive and frame-src directive

Jen C. — Tue, 17 Jun 2025 03:55:51 +0000

Resources

Content-Security-Policy: frame-ancestors directive

Content-Security-Policy: frame-src directive

Background

Since we don't yet know which related sites might embed our page, we don't need to include the frame-ancestors directive in the Content Security Policy (CSP) headers at this time.

Regarding the frame-src directive, our project contains an <iframe> element that loads a resource from https://my.auth.first.my.com.

Additionally, we load the script ${MY_AUTH_URL}/sso/sso.js from https://my.auth.first.my.com. This script creates an <iframe> element that loads resources from https://my.auth.second.my.com.

<script nonce={nonce} async src={`${MY_AUTH_URL}/sso/sso.js`} />

Step-by-Step Guide

Although we only know the domain value of MY_AUTH_URL, we don’t have the exact domain (https://my.auth.second.my.com) that is dynamically loaded by the script ${MY_AUTH_URL}/sso/sso.js.

However, based on the project requirements, we can assume that the domain used within the script will follow the pattern https://my.auth.XXX.my.com. To accommodate this, we can configure the frame-src directive to allow all subdomains under .my.com.

frame-src https://*.my.com;

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js: script-src and connect-src

Jen C. — Mon, 16 Jun 2025 07:24:55 +0000

Resources

@next/react-refresh-utils

What is React Fast Refresh?

Content-Security-Policy: script-src directive

Content-Security-Policy: connect-src directive

Background

Referencing the previous post, we have a basic setup for the Content Security Policy (CSP) headers with the script-src directive in the src/middleware.js file of the project.

Jen C.

May 28 '25

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js

#nextjs #webdev #security #javascript

Comments

3 min read

Errors and solutions

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-xxx'

Error message:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-YjQ3MGE2NDEtYTE2ZS00ODU5LTgzYjEtY2I0ODQ0OTQ3YWJi' https://my.domain.com 'strict-dynamic'".

    at ./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js (react-refresh.js:30:26)

    ...

Root cause

Because the module used for React Refresh during development contains code that uses eval(), the current CSP script-src directive is not sufficient, as it does not include the 'unsafe-eval' source expression. As shown below:

script-src 'self' 'nonce-${nonce}' ${authUrl} 'strict-dynamic';

Solution

For security reasons, we should not include 'unsafe-eval' in the production environment. Therefore, we should check the current environment and add 'unsafe-eval' only when it is not a production environment.

const authUrl = `${myAuthURL.protocol}//${myAuthURL.host}`;

const isProd = process.env.NODE_ENV === 'production';

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const cspHeader = `
    default-src 'self';
    script-src 'self' ${isProd ? '' : "'unsafe-eval'"} 'nonce-${nonce}' ${authUrl} 'strict-dynamic';
`;

Refused to connect to `'<URL>'` because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

Error message:

Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to connect to 'https://sr-client-cfg.amplitude.com/config?api_key=8750e93cf3cf432b04d4644133f3aa5c&config_keys=analyticsSDK&session_id=1750047771451' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

...

Root cause

'connect-src' directive is not set.

Solution

Set the 'connect-src' directive in the Content Security Policy (CSP) headers, and start with a basic value:

connect-src 'self';

Then, inspect the project codebase and monitor error messages in Chrome DevTools to update the connect-src values accordingly. For example, if the error message is:

Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "connect-src 'self'".

Refused to connect to 'https://api2.amplitude.com/2/httpapi' because it violates the following Content Security Policy directive: "connect-src 'self'".

...

As shown in the image:

We should add the URL https://api2.amplitude.com/2/httpapi to the connect-src directive:

connect-src 'self' https://api2.amplitude.com/2/httpapi;

Additionally, for URLs with dynamic query parameters (e.g. https://sr-client-cfg.amplitude.com/config?api_key=...&session_id=...), extract only the protocol and host, then add it to connect-src. The updated directive would look like:

connect-src 'self' https://api2.amplitude.com/2/httpapi https://sr-client-cfg.amplitude.com;

According to Content-Security-Policy: connect-src directive

The following APIs are controlled by this directive:

The ping attribute in <a> elements

fetch()

fetchLater() Experimental

XMLHttpRequest

WebSocket

EventSource

Navigator.sendBeacon()

To ensure compliance, review the codebase for any usage of these APIs that make external network requests. If any requests are made to URLs not currently listed in the connect-src directive, update the CSP header to include those origins accordingly.

JavaScript package manager - How to upgrade a package and its indirect dependencies using Yarn 1.x

Jen C. — Thu, 12 Jun 2025 09:41:25 +0000

Resources

Trivy

How npm Works

Managing dependencies

yarn upgrade

yarn why

Selective dependency resolutions

How to update module subdependencies with yarn

Upgrade Yarn Package(s)

Backgournd

A HIGH severity vulnerability was found in the axios package during a security scan using Trivy, as shown below:

We ran yarn why axios to determine why axios is installed and which packages depend on it. The output revealed that axios is a dependency of Package A, which is listed under the dependencies section of the current project's package.json. This means axios is indirectly included via Package A.

To address the vulnerability in axios, we need to:

Upgrade axios in Package A, since it directly includes the vulnerable version.
Upgrade Package A in the current project to the version that includes the patched axios.
Verify that both Package A and any direct use of axios in the project (if applicable) now rely on the secure, updated version.

This ensures the vulnerability is fully resolved throughout the dependency tree.

Step-by-step guide

In the project A

Upgrade axios in Project A, then release a new version of Project A that includes the updated axios.

In the current project

1. Upgrade to the latest version of `Package A` by running:

yarn upgrade A --latest

2. Delete the `/node_modules` folder to ensure a clean install

3. Reinstall all dependencies by running:

yarn install

4. Verify that both `Package A` and `axios` have been upgraded in the `yarn.lock` file

5. Run unit tests to ensure functionality is correct:

"scripts": {

    ...

    "test": "jest",

    ...

yarn test

6. Build the project to ensure there are no build-time errors:

In package.json

"scripts": {

    ...

    "build": "next build",

    ...

Run the command

yarn build

Make sure both commands complete successfully without any errors.

7. Run Trivy to see if the security issue has resolved

trivy fs .

JavaScript package manager - How to fix Cannot find module 'cheerio' error with Enzyme in Yarn 1 projects

Jen C. — Thu, 12 Jun 2025 03:41:36 +0000

Resources

Yarn 1

Selective dependency resolutions

Background

This guide addresses a common error encountered when running Jest tests with Enzyme in projects managed by Yarn 1. The error involves missing the Cheerio module due to version incompatibilities.

When running tests using the command yarn test, the following error is encountered:

Test suite failed to run

    Cannot find module 'cheerio/lib/utils' from 'node_modules/enzyme/build/Utils.js'

    Require stack:
      node_modules/enzyme/build/Utils.js
      node_modules/enzyme/build/ReactWrapper.js
      node_modules/enzyme/build/index.js
      jest/setup.js

      ...

Project setup

package.json

scripts

 "scripts": {
    ...

    "test": "jest",

    ...

Jest configuration

...

"jest": {
    "testEnvironment": "jsdom",
    "setupFiles": [
      "<rootDir>/jest/setupFiles.js"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jest/setup.js"
    ],

    ...

devDependencies

...

"devDependencies": {
    "@babel/core": "^7.26.10",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.0.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
    "babel-jest": "^27.1.0",
    "enzyme": "^3.11.0",
    "jest": "^27.1.0",

    ...

Babel configuration

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ['next/babel'],
  };
};

Root cause

Enzyme internally depends on Cheerio, but only supports up to 1.0.0-rc.3. If a newer version of Cheerio (such as 1.1.0) is installed, Enzyme will fail to locate expected modules, resulting in the error.

Cheerio 1.0.0 is incompatible with enzyme 3.11.0. #3987

Cheerio Update to 1.0.0 is breaking Enzyme 3.11.0 for Node < 18.17.0 #2606

Cheerio 1.0.0-rc.11 no longer support deep imports #2558

Solution

Based on the links in the previous section, the latest Cheerio version supported by Enzyme is 1.0.0-rc.3. Therefore, add a resolutions field to force Enzyme to use Cheerio version 1.0.0-rc.3:

package.json

...

 "resolutions": {
    "enzyme/cheerio": "1.0.0-rc.3"
  }

 ...

Next, we observe the Cheerio version in the yarn.lock file before and after adding the resolutions.

Before the change, Enzyme’s dependency on cheerio@^1.0.0-rc.3 is resolved to version 1.1.0:

...

cheerio@^1.0.0-rc.3:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.1.0.tgz#87b9bec6dd3696e405ea79da7d2749d8308b0953"
  integrity sha512-+0hMx9eYhJvWbgpKV9hN7jg0JcwydpopZE4hgi+KvQtByZXPp04NiCWU0LzcAbP63abZckIHkTQaXVF52mX3xQ==
  dependencies:
    cheerio-select "^2.1.0"
    dom-serializer "^2.0.0"
    domhandler "^5.0.3"
    domutils "^3.2.2"
    encoding-sniffer "^0.2.0"
    htmlparser2 "^10.0.0"
    parse5 "^7.3.0"
    parse5-htmlparser2-tree-adapter "^7.1.0"
    parse5-parser-stream "^7.1.2"
    undici "^7.10.0"
    whatwg-mimetype "^4.0.0"

...

enzyme@^3.11.0:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
  dependencies:
    array.prototype.flat "^1.2.3"
    cheerio "^1.0.0-rc.3"

    ...

After the change, Enzyme’s dependency on cheerio@^1.0.0-rc.3 is resolved to version 1.0.0-rc.3:

...

cheerio@1.0.0-rc.3, cheerio@^1.0.0-rc.3:
  version "1.0.0-rc.3"
  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
  dependencies:
    css-select "~1.2.0"
    dom-serializer "~0.1.1"
    entities "~1.1.1"
    htmlparser2 "^3.9.1"
    lodash "^4.15.0"
    parse5 "^3.0.1"

...

enzyme@^3.11.0:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
  dependencies:
    array.prototype.flat "^1.2.3"
    cheerio "^1.0.0-rc.3"

    ...

Should I Add Cheerio to devDependencies in package.json?

No, we do not need to add Cheerio manually to the devDependencies. When we install Enzyme, its direct dependencies, including Cheerio, are installed automatically. we can confirm this by running:

yarn info v1.22.22
warning package.json: No license field
{
  'array.prototype.flat': '^1.2.3',
  cheerio: '^1.0.0-rc.3',
  'enzyme-shallow-equal': '^1.0.1',
  'function.prototype.name': '^1.1.2',
  has: '^1.0.3',
  'html-element-map': '^1.2.0',
  'is-boolean-object': '^1.0.1',
  'is-callable': '^1.1.5',
  'is-number-object': '^1.0.4',
  'is-regex': '^1.0.5',
  'is-string': '^1.0.5',
  'is-subset': '^0.1.1',
  'lodash.escape': '^4.0.1',
  'lodash.isequal': '^4.5.0',
  'object-inspect': '^1.7.0',
  'object-is': '^1.0.2',
  'object.assign': '^4.1.0',
  'object.entries': '^1.1.1',
  'object.values': '^1.1.1',
  raf: '^3.4.1',
  'rst-selector-parser': '^2.2.3',
  'string.prototype.trim': '^1.2.1'
}

Summary

Add the resolutions field forcing Cheerio to 1.0.0-rc.3
Remove node_modules folder and clear yarn cache
Run yarn install to update dependencies
Verify with yarn.lock that the correct version of Cheerio is installed
Run tests with yarn test again

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js

Jen C. — Wed, 28 May 2025 10:43:57 +0000

Resources

Zed Attack Proxy (ZAP)

How to set a Content Security Policy (CSP) for your Next.js application

Middleware

nonce

HTMLElement: nonce property

Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)

'strict-dynamic'

How to setup nonce with NextJS

Matcher

Background

Address the "Content Security Policy (CSP) Header Not Set" issue using ZAP.

Install ZAP and run an automated scan. Below is an example of the generated report:

Adding a nonce with Middleware

Refer to Next.js official document:

middleware.js

import { NextResponse } from 'next/server'

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()

  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

  return response
}

You can add a matcher if needed in middleware.js. For example:

...

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
}

Reading the nonce and adding it to script elements

For example, when using the Next.js Pages Router, you can extract the nonce from the request headers in the _document.js file:

...

static async getInitialProps(context) {
    const props = await super.getInitialProps(context);

    const nonce = context.req.headers['x-nonce'];

    return { ...props, nonce };
  }

In the render function, add the nonce attribute to script elements such as <script>, <Script>, and <NextScript>:

...

  render() {
    const { nonce } = this.props;

    return (
      <Html lang='en'>
        <Head>
          <meta charSet='utf-8' />

          <Script
            nonce={nonce}
            type='application/ld+json'

            ...
          />

          ...

        </Head>
        <body>
          <Main />
          <script nonce={nonce} defer src='/static/icons/svgxuse.js' />
          <NextScript nonce={nonce} />
        </body>
      </Html>
    );
  }

NOTE: According to Accessing nonces and nonce hiding

For security reasons, the nonce content attribute is hidden (an empty string will be returned).

Errors and solutions

Refused to load the script `'<URL>'` because it violates the following Content Security Policy directive

Error:

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-Mjk5MDMxNTctMzU3Mi00ZTk0LWI5MzQtYmZjZWM5ZWQ1ZWJh' <URL> 'strict-dynamic'". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

As shown in the image:

Root cause

script-src 'self' 'nonce-${nonce}' 'strict-dynamic';

When the browser supports 'strict-dynamic', 'self' is ignored. Therefore, the error "Refused to load the script" can occur even when running on localhost.

Solution

Since it's not possible to determine if a browser supports 'strict-dynamic' in Next.js middleware, a quick and safe solution is to avoid ignoring matching prefetch requests (from next/link) and static assets.

To do this, remove the entire config (as mentioned above) from middleware.js.

Missing `nonce` attribute in scrips elements

For example

<script src="/_next/static/chunks/webpack.js" defer=""></script>

As shown in the image:

Root cause

Missing nonce in <Head>

Solution

In _document.js, add nonce attribute to <Head>:

...

return (
      <Html lang='en'>
        <Head nonce={nonce}>
          <meta charSet='utf-8' />

          ...

Jest - How to verify that an element does not exist in the rendered output

Jen C. — Wed, 21 May 2025 08:56:32 +0000

Resources

Types of Queries

.not

not.toBeInTheDocument

.toBeNull()

waitForElementToBeRemoved

ByTestId

.toThrow(error?)

waitFor

Document: querySelector() method

`.not.toBeInTheDocument()`

For example, according to the Types of Queries documentation,queryBy... returns null if no matching elements are found. Therefore, we can use .not.toBeInTheDocument() to assert that the element with the test ID user-profile-icon is not rendered in the DOM.

it('does not render the icon element when the "icon" prop is missing', () => {
  expect(screen.queryByTestId('user-profile-icon')).not.toBeInTheDocument();
});

`toBeNull()`

The above example can be rewritten as follows:

it('does not render the icon element when the "icon" prop is missing', () => {
  expect(screen.queryByTestId('user-profile-icon')).toBeNull();
});

When a query method throws an error if no elements are found

Query methods getBy..., getAllBy..., findBy..., and findAllBy... will throw an error when they cannot find elements. So we can use .toThrow() to verify that certain elements are not rendered.

For example, to verify that an element with the text 'Not Present' does not exist in the render output:

beforeEach(() => {
  render(<MyComponent />);
});

...

it('query methods throw when elements are not found', () => {
  expect(() => screen.getByText('Not Present')).toThrow();
});

In some cases, we may want to verify that an assertion fails when an element is not in the DOM. This can be done using .toThrow(), though it's less common and typically not recommended for general absence checks.

For example, we can use querySelector() to select an element by its CSS class and assert that calling .toBeInTheDocument() on a non-existent element (i.e., null) throws an error. For example:

describe('<Nav /> of <Header />', () => {
  let renderResult = null;

  beforeEach(() => {
    renderResult = render(<Nav {...props} />);
  });

  it('should hide sub menu', async () => {
    expect(() =>
      expect(
        renderResult.container.querySelector('.main-header-sub-menu')
      ).toBeInTheDocument()
    ).toThrow();
  });
});

When the Testing Library may not update the DOM immediately

Asynchronous State Updates
Debounced or Throttled Updates
State Updates After Re-render
Transitions and Animations
External Event Triggers
...

See Async Methods

Jest - Testing with React and React Testing Library: Useful APIs

Jen C. — Wed, 21 May 2025 03:02:05 +0000

Resources

react-testing-library API

Firing Events

waitFor

About Queries

Document: querySelector() method

render

Render into a container which is appended to document.body.

For example, render a component before each test and store the result in the renderResult variable:

describe('<Card />', () => {
  let renderResult = null;
  const props = {
    id: '1',
    title: 'test title',
    };

  beforeEach(() => {
    renderResult = render(<Card {...props} />);
    });

...

});

Logging the HTML

If you want to see the actual HTML output of your component (as it would appear in the browser), you can log the innerHTML of the container from the renderResult like this:

console.log(renderResult.container.innerHTML);

Output

<div class="card__info">
    <a class="card__txt-link" href="/video/1">
      <div class="card__top">
        <div class="card__title-wrapper">
          <h3 class="card__title">test title</h3>
        </div>
      </div>
    </a>
  </div>

Get an element from the render result's container.

For example, use querySelector() to select the first matching element by CSS selector:

expect(
      contentRenderResult.container.querySelector('.detail-meta__studio')
        .textContent
    ).toBe(props.studio);

rerender

Use when you need to update props, re-render the component, and verify the updated props are rendered correctly.

For example:

it('should render watermark if "watermark" prop is set', () => {
    const getWatermark = (container) =>
      container.querySelector('.card__watermark');
    const waterMarkUrl = '/static/images/logo-water.svg';

    let watermark = getWatermark(renderResult.container);
    expect(watermark).not.toBeInTheDocument();

    renderResult.rerender(
      <Card
        {...{
          ...props,
          watermark: {
            url: waterMarkUrl,
            alt: 'water',
          },
        }}
      />
    );
    watermark = getWatermark(renderResult.container);
    expect(watermark).toBeInTheDocument();
    expect(watermark.querySelector('img')).toHaveAttribute('src', waterMarkUrl);
  });

User Actions

fireEvent

For example, simulate a click on an element and check that the onClickItem callback function is called:

const handleItemClick = jest.fn();

it('should trigger "onClickItem" prop when item is clicked', () => {
    fireEvent.click(screen.getByRole('menuitem'));
    expect(handleItemClick).toHaveBeenCalledTimes(1);
  });

Note: Make sure handleItemClick is passed as the onClickItem prop to the component being tested. Otherwise, the callback won't be triggered.

waitFor

When you need to wait for something to either pass or fail.

For example, wait for the button to appear:

UserProfile.jsx

import { useEffect, useState } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Simulate network request
    setTimeout(() => {
      setUser({ name: 'Alice' });
    }, 500);
  }, []);

  return (
    <div>
      {user ? <button className="logout-button">Logout</button> : <p>Loading...</p>}
    </div>
  );
}

UserProfile.test.jsx

it('shows logout button after user is loaded', async () => {
  render(<UserProfile />);

  await waitFor(() => {
    expect(screen.getByText('Logout')).toBeInTheDocument();
  });
});

Queries

screen

DOM Testing Library also exports a screen object which has every query that is pre-bound to document.body

For example, check that the heading renders correctly:

it('renders the title heading correctly', () => {
  expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(props.title);
});

Optimize Core Web Vitals - FCP and LCP: Handle Offscreen (3) - Use memo, startTransition, and setTimeout</h1> <p>Jen C. — Mon, 19 May 2025 10:25:50 +0000</p> <h2> Pre-study </h2> <ul> <li><p><a href="https://react.dev/reference/react/startTransition" rel="noopener noreferrer">startTransition</a></p></li> <li><p><a href="https://react.dev/reference/react/memo" rel="noopener noreferrer">memo</a></p></li> <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout" rel="noopener noreferrer">Window: setTimeout() method</a></p></li> <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe" rel="noopener noreferrer"><code><iframe></code>: The Inline Frame element</a></p></li> <li><p><a href="https://www.developerway.com/posts/use-transition" rel="noopener noreferrer">React useTransition: performance game changer or...?</a></p></li> </ul> <h2> Background </h2> <p>Previously, I tried implementing lazy loading for the <code><iframe></code> or updating the URL of the <code><iframe></code> (<code>src</code> attribute) on the window load event, as suggested in the posts below. However, when users interact with the <code><iframe></code> before all the resources are fully loaded (since the URL is still an empty string), it results in a significant delay while waiting to load the iframe’s resources and perform callback actions.</p> <div class="ltaglink--embedded"> <div class="crayons-story "> <a href="https://dev.to/jenchen/improve-page-performance-by-lazy-loading-offscreen-5921" class="crayons-storyhidden-navigation-link">Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe></a> <div class="crayons-storybody crayons-storybody-full_post"> <div class="crayons-storytop"> <div class="crayons-storymeta"> <div class="crayons-storyauthor-pic"> <a href="/jenchen" class="crayons-avatar crayons-avatar--l "> </a> </div> <div> <div> <a href="/jenchen" class="crayons-storysecondary fw-medium m:hidden"> Jen C. </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Jen C. <div id="story-author-preview-content-2340532" class="profile-preview-cardcontent crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jenchen" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jen C.</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/jenchen/improve-page-performance-by-lazy-loading-offscreen-5921" class="crayons-storytertiary fs-xs"><time>Mar 18 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-storyindention"> <h2 class="crayons-storytitle crayons-story__title-full_post"> <a href="https://dev.to/jenchen/improve-page-performance-by-lazy-loading-offscreen-5921" id="article-link-2340532"> Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe> </a> </h2> <div class="crayons-storytags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tagprefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/html"><span class="crayons-tagprefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/frontend"><span class="crayons-tagprefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webperf"><span class="crayons-tagprefix">#</span>webperf</a> </div> <div class="crayons-storybottom"> <div class="crayons-storydetails"> <a href="https://dev.to/jenchen/improve-page-performance-by-lazy-loading-offscreen-5921#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-storysave"> <small class="crayons-storytertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> <div class="ltaglink--embedded"> <div class="crayons-story "> <a href="https://dev.to/jenchen/optimize-core-web-vitals-fcp-and-lcp-lazy-loading-offscreen-2-2jbj" class="crayons-storyhidden-navigation-link">Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe> (2)</a> <div class="crayons-storybody crayons-story__body-full_post"> <div class="crayons-storytop"> <div class="crayons-storymeta"> <div class="crayons-storyauthor-pic"> <a href="/jenchen" class="crayons-avatar crayons-avatar--l "> </a> </div> <div> <div> <a href="/jenchen" class="crayons-storysecondary fw-medium m:hidden"> Jen C. </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Jen C. <div id="story-author-preview-content-2406102" class="profile-preview-cardcontent crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jenchen" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jen C.</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/jenchen/optimize-core-web-vitals-fcp-and-lcp-lazy-loading-offscreen-2-2jbj" class="crayons-storytertiary fs-xs"><time>Apr 17 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-storyindention"> <h2 class="crayons-storytitle crayons-story__title-full_post"> <a href="https://dev.to/jenchen/optimize-core-web-vitals-fcp-and-lcp-lazy-loading-offscreen-2-2jbj" id="article-link-2406102"> Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe> (2) </a> </h2> <div class="crayons-storytags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tagprefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/frontend"><span class="crayons-tagprefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/tutorial"><span class="crayons-tagprefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webperf"><span class="crayons-tagprefix">#</span>webperf</a> </div> <div class="crayons-storybottom"> <div class="crayons-storydetails"> <a href="https://dev.to/jenchen/optimize-core-web-vitals-fcp-and-lcp-lazy-loading-offscreen-2-2jbj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-storysave"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> <h2> Solution: Step-by-Step Guide </h2> <h3> Use <code>setTimeout</code> to delay URL state update: </h3> <p>When the <code>LazyIframe</code> component mounts, use <code>setTimeout</code> to delay updating the iframe's URL state variable. This ensures the resources load with lower priority but still before the user interacts with the iframe.</p> <h3> Check if iframe URL is already the target URL: </h3> <p>To avoid unnecessary timer creation and state updates, check if the current iframe URL is already equal to the target URL. If they are the same, return early to prevent further action.</p> <h3> Wrap state update with <code>startTransition</code>: </h3> <p>Since the iframe should load with lower priority than user interactions, wrap the state update inside <code>startTransition</code> to ensure that it doesn’t block active user interactions on the page.</p> <h3> Wrap the <code>LazyIframe</code> component with <code>memo</code>: </h3> <p>Use <code>memo</code> to wrap the <code>LazyIframe</code> component. This prevents unnecessary re-renders of the component, improving performance.</p> <h3> Example Implementation of <code>LazyIframe</code> Component </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import { useEffect, useState, memo, startTransition } from 'react'; import { MY_AUTH_URL } from '../configs'; const iframeSrc = `${MY_AUTH_URL}/sso/iframePage.xhtml`; const LazyIframe = memo(function LazyIframe() { const [src, setSrc] = useState(''); useEffect(() => { if (src === iframeSrc) { return; } const timer = setTimeout(() => { startTransition(() => { setSrc(iframeSrc); }); }, 100); return () => clearTimeout(timer); }, [src]); return ( <iframe src={src} style={{ display: 'none' }} id='pidiframe' title='log out iframe' /> ); }); </code></pre> </div> </article> <article> <h1>Jest - Mocking Next.js Image to handle dynamic properties in tests</h1> <p>Jen C. — Mon, 05 May 2025 10:53:07 +0000</p> <h2> Pre-study </h2> <p><a href="https://nextjs.org/docs/pages/api-reference/components/image" rel="noopener noreferrer">Next.js - Image Component</a></p> <p><a href="https://github.com/vercel/next.js/issues/26749#issuecomment-885431747" rel="noopener noreferrer">Importing images used the 'import' keyword for the image 'src' breaks jest test #26749</a></p> <p><a href="https://jestjs.io/docs/manual-mocks" rel="noopener noreferrer">Jest - Manual Mocks</a></p> <p><a href="https://testing-library.com/docs/react-testing-library/intro/" rel="noopener noreferrer">React Testing Library</a></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters" rel="noopener noreferrer">MDN JavaScript - Rest parameters</a></p> <h2> Background </h2> <p>When testing a React component with Jest and the React Testing Library, this error occurs if the component renders a Next.js Image component and the Next.js Image component is not mocked.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Error: Uncaught [Error: Image with src "test-file-stub" is missing required "width" property.] </code></pre> </div> <h2> Solution </h2> <p>To allow passing dynamic properties into the mock image component so that it can handle different test cases, modify the mock image to accept an indefinite number of arguments as an array.</p> <p>In <strong>jest/setup.js</strong>, add the following:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>jest.mock('next/image', () => ({ esModule: true, default: (props) => { return <img {...props} />; }, })); </code></pre> </div> <h2> To check what is rendered </h2> <p>For example,<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const renderResult = render(<Header {...props} />); container = renderResult.container; console.debug(container.innerHTML); </code></pre> </div> <p>This will output the following in the terminal:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><header class="main-header"><div class="container-h"><div class="main-headertop"><a class="main-headerlogo-link" href="/"><img class="main-headerlogo" src="test-file-stub" alt="test alt"></a><div class="main-headertop-right"><div class="main-headerdropdown-btns"></div></div></div><div class="main-header__bottom"><nav role="navigation">Mocked Nav</nav></div></div></header> </code></pre> </div> </article> <article> <h1>Jest - Solution for "Jest encountered an unexpected token"</h1> <p>Jen C. — Mon, 05 May 2025 10:52:37 +0000</p> <h2> Pre-study </h2> <p><a href="https://crystallize.com/answers/tech-dev/compiling-vs-transpiling" rel="noopener noreferrer">Compiling Vs. Transpiling</a></p> <p><a href="https://jestjs.io/docs/code-transformation" rel="noopener noreferrer">Jest Code Transformation</a></p> <p><a href="https://jestjs.io/docs/configuration#transformignorepatterns-arraystring" rel="noopener noreferrer">Jest docs – transformIgnorePatterns</a></p> <h2> Background </h2> <p>When running unit tests using Jest, get the error as below<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation ... SyntaxError: Cannot use import statement outside a module > 1 | import axios, { isCancel } from 'axios'; | ^ 2 | import merge from 'lodash/merge'; at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14) </code></pre> </div> <h2> Root cause </h2> <p>When a unit test imports a function from a module that uses <strong>ECMAScript Module (ESM)</strong> syntax, for example, <code>import axios, { isCancel } from 'axios'</code>, which leads to Jest fail to parse because the module (e.g., <code>axios</code>) is located in <strong>node_modules</strong> and uses modern syntax that Jest does not transform by default.</p> <h2> Solution </h2> <p>Whitelist the <code>axios</code> package so that Jest transforms it, even though it is located in <strong>node_modules</strong>.</p> <p>In the Jest configuration file, add <code>axios</code> to <code>transformIgnorePatterns</code>, for example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>... "transformIgnorePatterns": [ "/node_modules/(?!(axios)/)" ] ... </code></pre> </div> <h3> Multiple packages? </h3> <p>If there are more than one package need to whitelist, for example, <code>axios</code> and <code>intl-messageformat</code>, can do:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>... "transformIgnorePatterns": [ "/node_modules/(?!(axios|intl-messageformat)/)" ], ... </code></pre> </div> </article> <article> <h1>JavaScript – The Boundary of Date</h1> <p>Jen C. — Thu, 01 May 2025 04:55:50 +0000</p> <h2> Resource </h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" rel="noopener noreferrer">MDN Date</a></li> </ul> <blockquote> <p>Date objects encapsulate an integral number that represents milliseconds since the midnight at the beginning of January 1, 1970, UTC (the epoch).</p> </blockquote> <h2> Background </h2> <p>Recently, we encountered an issue related to retrieving the milliseconds of a Date object for calculations by calling <code>getTime()</code>.</p> <p>The bug occurred because the system did not account for negative values returned by <code>getTime()</code> when the selected date is earlier than January 1, 1970. As a result, both the backend and frontend need to address this limitation and align on a solution.</p> <h2> Some experiments to test the boundaries </h2> <p>The last moment before 1970:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const lastMomentBefore1970 = new Date('1969-12-31T23:59:59.999Z'); console.log(lastMomentBefore1970.getTime()); </code></pre> </div> <p>Output<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[LOG]: -1 </code></pre> </div> <p>The moment right at 1970:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const epochMoment = new Date('1970-01-01T00:00:00.000Z'); console.log(epochMoment.getTime()); </code></pre> </div> <p>Output<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[LOG]: 0 </code></pre> </div> <p>The moment right after 1970:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const firstMomentAfter1970 = new Date('1970-01-01T00:00:00.001Z'); console.log(firstMomentAfter1970.getTime()); </code></pre> </div> <p>Output<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[LOG]: 1 </code></pre> </div> </article> </main></body></html>

DEV Community: Jen C.

Security - Solving the "Content Security Policy (CSP) Header Not Set": style-src

Resources

Background

Style usage in the project

Inline style property

Unsafe inline styles

Styles that are applied in JavaScript by setting the style attribute directly or by using cssText

Style properties that are set directly on an element’s style property.

Step-by-step guide

Further thoughts

What happens if we remove default-src and do not add any fetch directives?

What happens when the directive values 'unsafe-inline' and 'nonce-${nonce}' are set together?

Security - Solving the "Content Security Policy (CSP) Header Not Set": frame-ancestors directive and frame-src directive

Resources

Background

Step-by-Step Guide

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js: script-src and connect-src

Resources

Background

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js

Errors and solutions

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-xxx'

Root cause

Solution

Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

Root cause

Solution

JavaScript package manager - How to upgrade a package and its indirect dependencies using Yarn 1.x

Resources

Backgournd

Step-by-step guide

In the project A

In the current project

1. Upgrade to the latest version of Package A by running:

2. Delete the /node_modules folder to ensure a clean install

3. Reinstall all dependencies by running:

4. Verify that both Package A and axios have been upgraded in the yarn.lock file

5. Run unit tests to ensure functionality is correct:

6. Build the project to ensure there are no build-time errors:

7. Run Trivy to see if the security issue has resolved

JavaScript package manager - How to fix Cannot find module 'cheerio' error with Enzyme in Yarn 1 projects

Resources

Background

Project setup

package.json

Babel configuration

Root cause

Solution

Should I Add Cheerio to devDependencies in package.json?

Summary

Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js

Resources

Background

Adding a nonce with Middleware

Reading the nonce and adding it to script elements

Errors and solutions

Refused to load the script '<URL>' because it violates the following Content Security Policy directive

Root cause

Solution

Missing nonce attribute in scrips elements

Root cause

Solution

Jest - How to verify that an element does not exist in the rendered output

Resources

.not.toBeInTheDocument()

toBeNull()

When a query method throws an error if no elements are found

When the Testing Library may not update the DOM immediately

Jest - Testing with React and React Testing Library: Useful APIs

Resources

render

Logging the HTML

Get an element from the render result's container.

rerender

User Actions

fireEvent

waitFor

Queries

screen

Styles that are applied in JavaScript by setting the `style` attribute directly or by using `cssText`

Style properties that are set directly on an element’s `style` property.

What happens if we remove `default-src` and do not add any fetch directives?

What happens when the directive values `'unsafe-inline'` and `'nonce-${nonce}'` are set together?

Refused to connect to `'<URL>'` because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

1. Upgrade to the latest version of `Package A` by running:

2. Delete the `/node_modules` folder to ensure a clean install

4. Verify that both `Package A` and `axios` have been upgraded in the `yarn.lock` file

Refused to load the script `'<URL>'` because it violates the following Content Security Policy directive

Missing `nonce` attribute in scrips elements

`.not.toBeInTheDocument()`

`toBeNull()`