React : Component unit test cases are excluded from Jest configuration

[vishal423]

Overview of the issue

Component unit test cases are excluded from Jest configuration. This can be checked by looking under jest.conf.js file.

Motivation for or Use Case

Generated or newly added component unit test cases are not executed

Reproduce the error

Related issues

Suggest a Fix

jest.conf.js -->
Current:
testMatch: ['<rootDir>/src/test/javascript/spec/**/+(*.)+(spec.ts)'],
Required:
testMatch: ['<rootDir>/src/test/javascript/spec/**/+(*.)+(spec.ts?(x))'],

We also need to add enzyme configurations for enzyme functions (shallow, mount etc) to work:
jest.conf.js -->
setupFiles: ['<rootDir>/src/test/javascript/enzyme-setup.ts']

enzyme-setup.ts -->

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// React 16 Enzyme adapter
configure({ adapter: new Adapter() });

Above configurations enable execution of component test cases, however, few test cases fail due to usage of require.context in translation.ts as:
en: mergeTranslations(require.context('../../i18n/en', false, /.json$/))

As require.context is specific to webpack and Jest discourage it's use, we should identify an appropriate way to resolve this issue to enable execution of component unit test cases.

JHipster Version(s)

JHipster configuration

Using JHipster version installed globally
Executing jhipster:info
Options:

JHipster Version(s)

[email protected] /home/vishal/vishal/test/rgtw4
`-- (empty)

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "5.0.0-beta.1",
    "applicationType": "monolith",
    "baseName": "rgtw4",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "no",
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "react",
    "useSass": true,
    "clientPackageManager": "yarn",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en"
    ],
    "enableHibernateCache": false
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity BankAccount (BankAccount) {
  name String required,
  balance BigDecimal required
}
entity Label (Label) {
  label String required minlength(3)
}
entity Operation (Operation) {
  date DateTime required,
  description String,
  amount BigDecimal required
}

relationship OneToMany {
  BankAccount{operation} to Operation{bankAccount(name)}
}
relationship ManyToOne {
  BankAccount{user(login)} to User
}
relationship ManyToMany {
  Operation{label(label)} to Label{operation}
}

paginate Operation with infinite-scroll

Environment and Tools

java version "1.8.0_161"
Java(TM) SE Runtime Environment (build 1.8.0_161-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.161-b12, mixed mode)

git version 2.17.1

node: v8.9.1

npm: 5.5.1

yarn: 1.7.0

Docker version 18.03.1-ce, build 9ee9f40

Congratulations, JHipster execution is complete!

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• Checking this box is mandatory (this is just to show you read everything)

[deepu105]

@vishal423 could you please PR, this. I guess this was missed during the migration to Jest
cc @wmarques

[vishal423]

I am concerned with require.context usage as it ties code with webpack. On angular side, we used MergeJsonWebpackPlugin to handle merge outside in webpack build. Any good reason to not do same in react?

[deepu105]

I think yes, we should do it with MergeJsonWebpackPlugin. I originally used require.context when writing the i18n part and I wasnt aware that Jest was against it.

[deepu105]

@vishal423 will you be doing a PR?
Also about the enzyme config, I remember I asked @wmarques about it and he said its not needed for Jest may be it was because of the missing tsx extension

[vishal423]

@deepu105, I will try and may take a day or two based on bandwidth.

[wmarques]

@vishal423 @deepu105 Yup I found that on the enzyme docs:

Starting with version 15, Jest no longer mocks modules by default. Because of this, you no longer have to add any special configuration for Jest to use it with enzyme.

[wmarques]

About require.context, I don't really know what's the correct solution for this. Could we manually require or import all the files and then merge them? Require seems handled by jest...

[vishal423]

I have changed require.context code to align with angular codebase. Basic code almost ready and should be able to raise merge in sometime.

[vishal423]

@wmarques, I am not sure on how it will work without enzyme configurations. On same page, they also stated below:

To run the setup file to configure Enzyme and the Adapter with Jest direct setupTestFrameworkScriptFile to literally the string and the path to your setup file.

{
"jest": {
"setupTestFrameworkScriptFile": "src/setupTests.js"
}
}

And per my understanding, they mean by below configurations:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// React 16 Enzyme adapter
configure({ adapter: new Adapter() });