undefined class names

[baywet]

Current situation

consider the following repro

1. scaffold a net new SPFx project (hellworld webpart, react...) on version 1.9.1
2. execute the following command

   npm i jest @voitanos/jest-preset-spfx-react16 -D

3. Add the following file /src/webparts/helloWorld/compnents/HelloWorld.test.tsx

   import * as React from 'react';
   import 'jest';
   import {shallow} from 'enzyme';
   import toJson from 'enzyme-to-json';
   import styles from './HelloWorld.module.scss';
   import HelloWorld from './HelloWorld';
   describe('stream tile should display properly', () => {
     const wrapper = shallow(<HelloWorld description={'amazing'} />);
     console.warn(`title class value ${styles.title}`);
     test(`snashot should match`, () => {
       expect(toJson(wrapper)).toMatchSnapshot();
     });
   });

4. execute the following command npm test

the snapshot file will look something like that

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`stream tile should display properly snashot should match 1`] = `
<div>
  <div>
    <div>
      <div>
        <span>
          Welcome to SharePoint!
        </span>
        <p>
          Customize SharePoint experiences using Web Parts.
        </p>
        <p>
          amazing
        </p>
        <a
          href="https://aka.ms/spfx"
        >
          <span>
            Learn more
          </span>
        </a>
      </div>
    </div>
  </div>
</div>
`;

notice the absence of classes on elements.
this is problematic if I want the value "amazing" of the description as I can't write precise selectors and need to implement counting instead. This translates into flaky tests if you have complex components that display or not some elements based on some conditions.

Desired situation

the classes to be present so we can leverage selectors properly and implement stable unit tests.

Environment

Windows 10
node 10.16.0
jest 24.9.0

Thanks for the help!

[baywet]

Found a solution after lots of searching keyz/identity-obj-proxy#9 (comment)
Should the postinstall enable the esmoduleinterop? or at least be documented on readme?

[andrewconnell]

Fixed... no need to do a postinstall. ts-jest uses it's own tsconfig.json defined within this package. Ref:

[baywet]

Hey @andrewconnell
Thanks for the quick answer on this one.
Just updated to latest of this package, removed esmoduleinterop from the project tsconfig.json, ran the unit tests again and the class names are missing.
Did I miss something?
Looking at your commit I can see two differences:

• the classname is hardcoded (not relying on the styles import)
• your example unit tests are not querying against that class name (to validate the issue)

[andrewconnell]

Good catch... missed a commit of one of my changes. Fixed now...

The issue was that ts-jest wasn't configured to use the TypeScript config file within the preset... it was defaulting to the project's tsconfig.json.

ref 9c48e13

[baywet]

Thanks!
I'm now getting a looot of errors (no implicit anys, libs missing for dom & co, decorators, modules not being resolved etc...)
I think it'd make sense to have that tsconfig extend the project root tsconfig (which in it's turn inherits the one provided by rush)