Switch from karma / mocha to Jest and react-testing-library

[empz]

This issue is a:

• Question / support request

How can I switch from Karma / mocha to JEST and react-testing-library?

[sergiop]

I don't know if you solved in the meantime, since your request is a little bit old, anyway... I just added it in this way:

yarn add -D jest babel-jest react-testing-library jest-dom

In the root, create these three files:

jest.config.js

module.exports = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  verbose: true,
  transform: {
    '^.+\\.js$': '<rootDir>/jest.transform.js',
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.jsx?$',
  moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
  coverageThreshold: {
    global: {
      branches: 30,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  setupFilesAfterEnv: ['./react-testing-library.setup.js'],
}

jest.transform.js

module.exports = require('babel-jest').createTransformer({
  presets: ['@babel/env', '@babel/react'],
})

react-testing-library.setup.js

import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'

In my config I'm using also FlowTypes and CSS Module.

• To add support for FlowTypes add @babel/preset-flow module and add it to the preset array in jest.transform.js
• To allow Jest read CSS Module class names, add identity-obj-proxy module and the following property in jest.config.js

moduleNameMapper: {
  '\\.css$': 'identity-obj-proxy',
},

[cheluis]

I don't know if you solved in the meantime, since your request is a little bit old, anyway... I just added it in this way:

yarn add -D jest babel-jest react-testing-library jest-dom

In the root, create these three files:

jest.config.js

module.exports = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  verbose: true,
  transform: {
    '^.+\\.js$': '<rootDir>/jest.transform.js',
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.jsx?$',
  moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
  coverageThreshold: {
    global: {
      branches: 30,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  setupFilesAfterEnv: ['./react-testing-library.setup.js'],
}

jest.transform.js

module.exports = require('babel-jest').createTransformer({
  presets: ['@babel/env', '@babel/react'],
})

react-testing-library.setup.js

import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'

In my config I'm using also FlowTypes and CSS Module.

• To add support for FlowTypes add @babel/preset-flow module and add it to the preset array in jest.transform.js
• To allow Jest read CSS Module class names, add identity-obj-proxy module and the following property in jest.config.js

moduleNameMapper: {
  '\\.css$': 'identity-obj-proxy',
},

Yo! I am trying to do the same, to use jest while using nwb, but I get this error:

Jest encountered an unexpected token

And for the love of mine, I haven't been able to solve it, I have tried everything but with no avail. Could you please share you nwb.config file and or your package.json file? I tried what you did and nothing. Thanks in advance

[sergiop]

Jest encountered an unexpected token

@cheluis this error means Jest is not understanding the language of a portion of the code it is parsing. You have to remove parts from your code until you find which is the part it doesn't like.

I encountered this error with FlowTypes. Have you tried to remove flow types declarations? In this case you can fix it adding @babel/preset-flow as I wrote above in my first comment.

Anyway... you can find my configuration here: https://github.com/sergiop/react-giphy-searchbox

I hope this can help.

[lewhunt]

I also have a repo of a sample nwb react-component project configured for Jest and react-testing-library here, for anyone who may find it useful: https://github.com/lewhunt/nwb-react-testing-library