Fix Jest bugs

[kevinfodness]

Description

A number of Jest bugs are present after configuration, which should be fixed.

Use Case

As a user, I should be able to run the configure command and have Jest work out of the box.

Acceptance Criteria

• Upgrade @testing-library packages to latest and install react-dom at the same version as react (although we aren't using react-dom directly, if we don't pin it to this version, peer dependencies on testing library will try to install the latest version, which is react-dom 19, which causes a dependency mismatch where we're requiring react 18)
• Investigate removing the Babel config used by Jest - we're already using ts-jest, is there a way to get it to work natively without requiring a Babel config?

[benpbolton]

@kevinfodness I'm wondering if you can supply sample tests that I might be able to leverage (ideally via turbo/root) to ensure this works (via note on #169)

[kevinfodness]

Yeah, for a basic TypeScript Jest test you can use (substituting the path to the scaffolded plugin accordingly):

/plugins/create-wordpress-plugin/entries/sample/index.ts

export default function sample(x: number, y: number): number {
  return x * y;
}

/plugins/create-wordpress-plugin/entries/sample/index.test.ts

import sample from './index';

describe('Sample Function Tests', () => {
  it('should return the product of two numbers', () => {
    expect(sample(2, 3)).toBe(6);
  });
});

And for a basic React component test:

/plugins/create-wordpress-plugin/entries/sample-react/index.tsx

export default function Sample() {
  return (
    <div>
      <h1>Sample React Component</h1>
      <p>This is a sample component for demonstration purposes.</p>
    </div>
  );
}

/plugins/create-wordpress-plugin/entries/sample-react/index.test.tsx

import { render, screen } from '@testing-library/react';

import Sample from './index';

describe('Sample React Component Tests', () => {
  it('renders the component with correct text', () => {
    render(<Sample />);
    expect(screen.getByText('Sample React Component')).toBeInTheDocument();
    expect(screen.getByText('This is a sample component for demonstration purposes.')).toBeInTheDocument();
  });
});

In order to get this to work in my sample environment, I had to make the following changes:

• Add a file called jest-setup.ts in the root with import '@testing-library/jest-dom'; as the only contents.
• Update jest.config.ts to change setupFilesAfterEnv to be ['<rootDir>/jest-setup.ts']. (In the linked PR, I see that this was updated to include jest-dom, but I wasn't able to get it working that way, it had to be in the setup file.)
• Update package.json in the plugin folder (same should be done for the theme folder) to run the Jest commands with the flag --config=../../jest.config.ts so that it looks for the config in the proper place (by default it wants to look where the package.json file lives, but we actually declare the config file two levels up). This change will need to be made in the configuration script because it modifies files that are added by scaffolding the plugin and theme.
• Install ts-node as a dev dependency at the root so that Jest can parse the config file using TypeScript (I see this is already done in the linked PR).
• Add ./jest-setup.ts to the list of files in the include directive in tsconfig.json in the root.

Let me know if you run into any trouble and I can help you debug.

[benpbolton]

Those test entries were helpful, thanks!

From what I can tell, this one-liner will avoid the jest-setup.ts creation and two updates to jest.config.ts and tsconfig.json ... (more info in the PR - but the one-liner should/will do it).

Then assuming the theme/plugin have a test script (they don't, but one can be added to easily replace the existing jest scripts) an npm run test will kick off turbo and properly run the tests.

Thanks again, I'll submit CR