Jest & React & Typescript & React-Testing-Library error

Question

I have a React/NextJS project setup using Typescript and am adding unit testing with Jest and React Testing Library.

A unit test for my component looks like this:

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';

import AppLayout from '.';

describe('<AppLayout>', () => {
  it('renders children', () => {
    const children = 'Test';
    const props = { pathname: '/' };
    const component = <AppLayout {...props}>{children}</AppLayout>;
    const { getByText } = render(component);
    expect(getByText(children)).toBeInTheDocument();
  });
});

This throws the following error:

Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's some key files in my project to help:

.babelrc

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": ["babel-plugin-styled-components"]
    },
    "production": {
      "presets": ["next/babel"],
      "plugins": [
        "@babel/plugin-transform-react-inline-elements",
        ["babel-plugin-styled-components", { "displayName": false }]
      ]
    }
  }
}

tsconfig.js

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    ".next",
    "node_modules"
  ]
}

jest.config.js

module.exports = {
  roots: ['./'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
};

My project compiles and runs fine but I'm guessing there's some configuration issue I need to fix to get my unit tests running correctly. Any ideas?

winwiz1 · Accepted Answer · 2019-10-14 08:47:41Z

0

This jest.config.js works with Typescript, Jest, React Testing Library and without Babel. To test it works, execute:

git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react/client
yarn && yarn test

Although testEnvironment: 'jsdom' is not really needed due to being the default, you can look at the other settings.

As a sidenote, Babel is a wonderful software but you might consider setting "target": "es5" and using react-app-polyfill instead.

edited Oct 14, 2019 at 8:47

answered Oct 14, 2019 at 8:32

winwiz1

3,18214 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

CaribouCode Over a year ago

Not sure I quite follow your answer. My project uses NextJS (which uses babel) and typescript (also built into NextJS).

winwiz1 Over a year ago

"if Jest sees a Babel config, it will use that to transform your files". Jest should use ts-jest to transform.

CaribouCode Over a year ago

okay, but in my jest.config.js I have this line: '^.+\\.tsx?$': 'ts-jest',. Isn't that telling Jest to use ts-jest to transform .ts or .tsx files?

winwiz1 Over a year ago

Yes, it is telling that to Jest. I have noted it and that is why I brought up the issue with Babel. Which seems to be influencing Jest into stating that it will be Babel who Jest will use "to transform your files". Looks like an issue, hence the suggestion to replace Babel. I didn't know you use NextJS.

CaribouCode Over a year ago

Okay. I don't think replacing Babel is an option with NextJS. It's built into the framework. I did mention I was using NextJS in my question.

|

Collectives™ on Stack Overflow

Jest & React & Typescript & React-Testing-Library error

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related