Home > front end >  Jest encountered an unexpected token (TinyMCE)
Jest encountered an unexpected token (TinyMCE)

Time:01-20

I'm using Jest to run unit tests on one of my components, but I'm getting a few errors.

The component that I am trying to test uses tinymce and as a result, I import a few files from tinymce. I've seen on the offical Jest documentation that I insert the following, which I have in my setupTests.js file:

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

However, I have done that, but I am encountering another problem:

Jest encountered an unexpected token SyntaxError: Unexpected token '.'

import "tinymce/skins/ui/oxide.skin.min.css"

I have tried to follow the advice of mocking everything that comes from Tinymce, as well as mocking non-JS modules, using "moduleNameMapper". For example, my _jest.config.js file includes:

module.exports = {
  "moduleNameMapper": {
    "^image![a-zA-Z0-9$_-] $": "GlobalImageStub",
    "^[./a-zA-Z0-9$_-] \\.png$": "<rootDir>/RelativeImageStub.js",
    "module_name_(.*)": "<rootDir>/substituted_module_$1.js",
    "assets/(.*)": [
      "<rootDir>/images/$1",
      "<rootDir>/photos/$1",
      "<rootDir>/recipes/$1"
    ]
  }
  "transformIgnorePatterns": [
    "<rootDir>/node_modules/"
  ]
}

The above doesn't work and I still get the same error.

EDIT:

As per one of the suggestions, I've created a styleMock.js file which contains module.exports = {}; and is included in my src/tests/jest/__mocks__ path. I've then inputted:

"moduleNameMapper": {
  '\\.(css|less)$': '<rootDir>/src/tests/jest/__mocks__/styleMock.js'
}

But I'm still getting the same error as above.

CodePudding user response:

Following this documentation worked.

In another words, adding in the package.json the following:

{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

As well as running yarn add --dev identity-obj-proxy

  •  Tags:  
  • Related