Adding React Testing Library

[gtodd876]

I spent the day and failed at trying to get TypeScript, ESLint, absolute imports and react testing library to all play nice. I started by referencing this example in the next repo:

https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest.
This example got me part of the way there but does not use absolute imports or React testing library.

Here's where I ended up dependency wise:

"dependencies": {
    "next": "^9.5.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.3",
    "@testing-library/react": "^10.4.8",
    "@types/jest": "^26.0.10",
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.46",
    "@typescript-eslint/eslint-plugin": "^3.9.0",
    "@typescript-eslint/parser": "^3.9.0",
    "babel-jest": "^26.3.0",
    "eslint": "^7.7.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jest": "^23.20.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.0.8",
    "jest": "^26.4.0",
    "jest-watch-typeahead": "^0.6.0",
    "prettier": "^2.0.5",
    "typescript": "^3.9.7"
  }

My Jest Config:

module.exports = {
  roots: ['<rootDir>'],
  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
  },
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
  },
}

Index page:

export default function HomePage(): JSX.Element {
  return (
    <>
      <h1>Test</h1>
    </>
  );
}

TypeScript Config

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
  "exclude": ["node_modules", ".next", "out"]
}

Basic test

import React from 'react';
import HomePage from '@/pages/index';
import { render } from '@testing-library-react';

test('<HomePage />', () => {
  const { getByText } = render(<HomePage />);

  expect(getByText(/test/i)).toBeInTheDocument();
});

When i run yarn test I can't use JSX inside the React Testing Library's render method.

When I try to add the .babelrc config from the next example then it breaks my absolute imports and the test fails on the import statement instead.

Any help would be greatly appreciate to help me wrangle this dev tooling!

[jamesmosier]

That example uses test-library. I was able to get this to work, but I used the testUtils import in my test instead of a direct import. Looks like it just exports the test-library module anyway, but I didn't change anything about the example except I added your test in the index.test.tsx file.

And for the pathing, you'll have to specify your custom paths in the jest.config.js (at least from my own testing).

  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
    "^@pages(.*)$": "<rootDir>/pages$1",
  },

[gtodd876]

Thank you for the help James!

I cloned the example repo and made the modification to my jest.config.js and got past that error. Then it failed on toBeInTheDocument() method in my sample test file.

Cannot find module 'next/babel'

I found out that that particular method comes from the jest-dom package and not react-testing-library.
Adding the packages jest-dom & @testing-library/jest-dom got jest to run the test without any issue.

I thought I'd share in case anybody runs into a similar issue.

... Loving the absolute paths feature. It's the little things that make my day :)