SWC with React Testing Library

[janhesters]

• @testing-library/react version: 12.1.2
• Testing Framework and version: Jest 27.3.1
• DOM Environment: default version with Jest
• React: 17.0.2
• Next: 12.0.5

Relevant code or config:

This is jest.config.ts.

import type { Config } from '@jest/types';
import nextJest from 'next/jest';

const createJestConfig = nextJest({ dir: '.' });

const config: Config.InitialOptions = {
  moduleDirectories: ['node_modules', '<rootDir>/src'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
};

export default createJestConfig(config);

As you can see, this uses Next.js's SWC based Rust compiler settings for Jest.

And here is jest.setup.ts:

import '@testing-library/jest-dom';

What you did:

I created a custom render method to support i18n:

import { render } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';

import { i18n } from './i18n';

type RenderParams = Parameters<typeof render>;

const customRender = (ui: RenderParams[0], options?: RenderParams[1]) =>
  render(ui, {
    wrapper: ({ children }) => (
      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
    ),
    ...options,
  });

export default customRender;

I exported it alongside the other @testing-library/react methods as described in the docs:

import customRender from './render';

export * from '@testing-library/react';

export { customRender as render };

I then imported those in my tests:

import { render, screen } from 'tests/test-utils';

import LandingPage from './landing-page-component';

describe('landing page component', () => {
  it('displays a greeting', () => {
    render(<LandingPage />);

    expect(screen.getByText(/welcome/i)).toBeInTheDocument();
  });
});

What happened:

The test fails:

 FAIL  src/features/landing/landing-page-component.test.tsx
  ● Test suite failed to run

    TypeError: Cannot redefine property: render
        at Function.defineProperty (<anonymous>)



      at src/tests/test-utils.ts:16:12
          at Array.forEach (<anonymous>)
      at Object.<anonymous> (src/tests/test-utils.ts:13:21)
      at Object.<anonymous> (src/features/landing/landing-page-component.test.tsx:3:18)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:401:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.596 s

Reproduction:

• yarn create next-app
• touch tsconfig.json
• (as of creation of this post use next canary for SWC by saying yarn add next@canary)
• yarn add --dev typescript @types/react jest @testing-library/react @testing-library/jest-dom ts-node
• Add a test script to package.json: "test": "jest"
• Convert all files to .tsx.
• Create the config files and custom render method as described above.
• Create a test that uses the custom render method.

Problem description:

The code is compiled with SWC and it looks like it doesn't allow redefinitions.

Suggested solution:

For now a workaround is to import the custom render and the other testing library methods seperately.

[eps1lon]

Thanks for the report.

TypeError: Cannot redefine property: render

This is probably an issue with the compiler you're using. We've had a similar report before and it turned out that our code was spec compliant but the bundler wasn't: #790

Code like

export * from '@testing-library/react';

export { customRender as render };

is valid even though customRender as render would override the render export from @testing-library/react.

Could you check if the following code also throws the same error:

// test-utils.js
import customRender from './render';

export * from './testing-library.js'

export { customRender as render };
// testing-library.js
export function render() {}

[eps1lon]

Closing since we haven't heard back.