Jest React tests with Drupal's global Drupal.t function

I have been tasked to develop on an existing codebase which uses React and Drupal together. On the React side, it has a lot of different tests for its React components using Jest. I have never wrote any tests myself using Jest (or tests in general).

I've now investigated and read a bit on about Jest & its documentation and it seems to be very straight forward.

React and using Drupal translations

In my React components I have several bits of dynamic or static strings that need to be able to be translated through Drupal's interface translations.

Drupal has a global Drupal.t() function that can be used with React. You are able to wrap your strings like this:

1const Card = () => {
2  return (
3    <div className="card">
4      <h2 className="card__heading">
5        {`${Drupal.t('Drupal translations')}`}
6      </h2>
7    </div>
8  )
9};

In Drupal you should now be able to see Drupal translations to be translatable in the user interface translation section.

Testing React components with Jest

Jest is really straight forward with how to test a component:

1. Create .spec.js file
2. Import React
3. Import your React component you want to create tests for
4. Write and create the test

That's the basic gist of it.

1import React from 'react';
2import { Card } from './Card';
3
4describe('<Card />', () => {
5  it('renders without error', () => {
6    expect(<Card />).toBeTruthy();
7  });
8}

That's the test. Easy isn't it?

Oh no. The tests have failed. Why you ask?

1ReferenceError: Drupal is not defined

We need to somehow define Drupal to Jest for the tests to pass. This is where I hit a wall with Jest tests with React and Drupal.

I didn't find anything related to this issue by googling for it, until I found the correct search query: "jest ignore drupal". I don't know why I didn't think of that earlier.

I found a post from Elendev about "React, TypeScript, Jest and global variables" which helped me get my tests to pass.

Creating global Jest variables

I followed Elendev's post and created myself a global variable for Drupal and its t() function. This is the line you need:

1global.Drupal = { t: text => text };

This is the final React component structure which will pass with using Drupal.t() function:

1import React from 'react';
2import { Card } from './Card';
3
4describe('<Card />', () => {
5  it('renders without error', () => {
6    global.Drupal = { t: text => text }; // Create global variable.
7    expect(<Card />).toBeTruthy();
8    delete global.Drupal; // Remove the created global variable after the test.
9  });
10}