Jest: SyntaxError: Unexpected token create react-app import locales yaml

Created on 11 Jul 2019  ·  8Comments  ·  Source: facebook/jest

🐛 Bug Report

I am trying to run test but always got an error said that

 /Users/syafilm/Sites/Javascript/search-giphy-two/src/locales/en.yml:5
         search-giphy: "Search Giphy here"

     SyntaxError: Unexpected token :

       1 | import i18next from 'i18next'
       2 |
       3 | const localeEn = require('locales/en.yml')
         |                  ^
       4 | const localeId = require('locales/id.yml')
       5 |
       6 | switch (document.documentElement.lang) {

To Reproduce

  • first eject create react app then add this code to alias section in webpack.config.js, yarn add i18next, then create test then yarn test
   alias: {
           // Support React Native Web
           // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
           'utils': path.resolve('src/utils'), // utils
           'api': path.resolve('src/api'), // api
           'pages': path.resolve('src/pages'), // pages
           'components': path.resolve('src/components'), // components
           'locales': path.resolve('src/locales'), // locales
           'images': path.resolve('src/assets/images'), // image
           'react-native': 'react-native-web',
         },
  • then inside locales there is file yml translation
en:
  home:
    trending: "Trending"
    random: "Random"
    search-giphy: "Search Giphy here"
    filter-random: "Filter random doesn't work because Giphy api give only an object not array of object"
    no-result: "No result found"
    dark-mode: "Dark Mode"
  • here is my jest config setup and setup and package json
module.exports = {
  setupFiles: ['./jest.setup.js'],
  verbose: true,
  testRegex: '\\.test(.js|.jsx)$',
  moduleNameMapper: {
    '^api(.*)$': '<rootDir/src/api$1',
    '^components(.*)$': '<rootDir/src/components$1',
    '^utils(.*)$': '<rootDir/src/utils$1',
    '^pages(.*)$': '<rootDir/src/pages$1',
    '^locales(.*)$': '<rootDir/src/locales$1',
    '^.+\\.(css|less|scss|yaml)$': 'identity-obj-proxy',
  },
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
};

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
Enzyme.configure({adapter: new Adapter()});

{
  "name": "search-giphy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.2.2",
    "@emotion/core": "^10.0.9",
    "@svgr/webpack": "4.1.0",
    "axios": "^0.18.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^8.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.1",
    "babel-preset-react-app": "^7.0.2",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "emotion": "^10.0.9",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "i18next": "^17.0.6",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.2",
    "jest-resolve": "23.6.0",
    "jest-watch-typeahead": "^0.2.1",
    "js-yaml": "^3.13.1",
    "js-yaml-loader": "^1.0.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.5.0",
    "postcss-safe-parser": "4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-app-polyfill": "^0.2.2",
    "react-dev-utils": "^8.0.0",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "1.2.2",
    "url-loader": "1.1.2",
    "webpack": "4.28.3",
    "webpack-dev-server": "3.1.14",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3"
  },
  "scripts": {
    "start": "PORT=8000 node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "jest",
    "lint": "eslint --ext .js --ext .jsx src/components/* src/pages/*"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": ["0.2%", "not dead", "not ie <= 11", "not op_mini all"],
  "babel": {
    "presets": ["react-app"]
  },
  "devDependencies": {
    "lint": "^0.7.0"
  }
}

Expected behavior

I expect run smoothly because already defined locales in modulename mapper jest setup

Link to repl or repo (highly encouraged)

i cant show the link because this is private for client only

Bug Report Needs Repro Needs Triage
Source
picture fills27

All 8 comments

Please put together a minimal reproduction (following your own steps?) that we can pull down. I'd guess this is just a missing transform, but it's hard to say without a complete example 🙂

(I fixed up some of the formatting of your post btw)

SimenB picture SimenB on 11 Jul 2019
👍1

Please put together a minimal reproduction (following your own steps?) that we can pull down. I'd guess this is just a missing transform, but it's hard to say without a complete example 🙂

(I fixed up some of the formatting of your post btw)

what does it means a missing transform ?

fills27 picture fills27 on 11 Jul 2019

You need to transform yml files

https://jestjs.io/docs/en/configuration#transform-object-string-string

SimenB picture SimenB on 11 Jul 2019
👍1

Okey i'll try if it works going to close this case

fills27 picture fills27 on 11 Jul 2019

still doesnt work got the same error

module.exports = {
  setupFiles: [
    "./jest.setup.js"
  ],
  verbose: true,
  testRegex: "\\.test\(\.js|\.jsx)$",
  moduleNameMapper: {
    "^api(.*)$": "<rootDir>/src/api$1",
    "^components(.*)$": "<rootDir>/src/components$1",
    "^utils(.*)$": "<rootDir>/src/utils$1",
    "^pages(.*)$": "<rootDir>/src/pages$1",
    "^locales(.*)$": "<rootDir>/src/locales$1",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/src/test/__mocks__/fileMock.js",
    "^.+\\.(css|less|scss|yaml)$": "identity-obj-proxy",
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
}

i just update the jest.config.js but still doesnt work

fills27 picture fills27 on 11 Jul 2019

In that case, please create a reproduction as both the issue template asks for and I requested.

(There's no transform in you config - you put it in moduleNameMapper)

SimenB picture SimenB on 11 Jul 2019
👍1

In that case, please create a reproduction as both the issue template asks for and I requested.

(There's no transform in you config - you put it in moduleNameMapper)

i just read the documentation and there is no example about transform
i just made it by self but still doesnt work

module.exports = {
  setupFiles: [
    "./jest.setup.js"
  ],
  verbose: true,
  testRegex: "\\.test\(\.js|\.jsx)$",
  moduleNameMapper: {
    "^api(.*)$": "<rootDir>/src/api$1",
    "^components(.*)$": "<rootDir>/src/components$1",
    "^utils(.*)$": "<rootDir>/src/utils$1",
    "^pages(.*)$": "<rootDir>/src/pages$1",
    "^locales(.*)$": "<rootDir>/src/locales$1",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/src/test/__mocks__/fileMock.js",
    "^.+\\.(css|less|scss|yaml)$": "identity-obj-proxy",
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
  transform: {
    ".*\\.(yml)$": "yml",
 }
}

i got different error now, like this

● Validation Error:

  Module yml in the transform option was not found.
         <rootDir> is: /Users/syafilm/Sites/Javascript/search-giphy-two

or could you please give me an example ?

fills27 picture fills27 on 11 Jul 2019

I linked you to the docs above, or you can take a look at the webpack docs which has an example for css files: https://jestjs.io/docs/en/webpack#mocking-css-modules

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

SimenB picture SimenB on 11 Jul 2019
😕2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

paularmstrong picture paularmstrong  ·  3Comments
jardakotesovec picture jardakotesovec  ·  3Comments
nsand picture nsand  ·  3Comments
ticky picture ticky  ·  3Comments
kgowru picture kgowru  ·  3Comments