Jest: Unmocking axios? I get 'the string did not match the expected pattern'

Created on 6 Mar 2018  Â·  7Comments  Â·  Source: facebook/jest

OS: windows 10
Node version: 8.9.1
Jest version: 22.0.4

issue:
with the following code:

jest.unmock('axios');
import axios from "axios";

function parseJson(data) { return data ? JSON.parse(data) : null; }

function testMe () {

    return axios.get('/api/data/product-information', {
        auth: {
            username: 'admin',
            password: 'root'
        },
        headers: {
            "Accept": "application/yang-data+json",
            "Cache-Control": "no-store, no-cache, must-revalidate"
        },
        withCredentials: true,
        transformRequest: parseJson
    })
}


test('test me', () => {
    testMe().then((data) => {
        console.log(data);
    }).catch(err => {
        console.log(err);
    });

    expect(1).toBe(1)
});

I get the following in return:

> [email protected] test C:\Users\sheppqu\WebstormProjects\polatis files\polatis\polatis-app
> jest --config jest.config.js --no-cache

 PASS  __tests__\restapi.test.js
  √ test get_connection method returns expected properties (5ms)

  console.log __tests__\restapi.test.js:28
    SyntaxError: The string did not match the expected pattern.
        at XMLHttpRequest.open (C:\Users\sheppqu\WebstormProjects\polatis files\polatis\polatis-app\node_modules\jsdom\
lib\jsdom\living\xmlhttprequest.js:470:15)
        at dispatchXhrRequest (C:\Users\sheppqu\WebstormProjects\polatis files\polatis\polatis-app\node_modules\axios\l
ib\adapters\xhr.js:45:13)
        at new Promise (<anonymous>)
        at xhrAdapter (C:\Users\sheppqu\WebstormProjects\polatis files\polatis\polatis-app\node_modules\axios\lib\adapt
ers\xhr.js:12:10)
        at dispatchRequest (C:\Users\sheppqu\WebstormProjects\polatis files\polatis\polatis-app\node_modules\axios\lib\
core\dispatchRequest.js:59:10)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.432s
Ran all test suites.

Note the syntax error, SyntaxError: The string did not match the expected pattern.. What is going on? I need to be able to run an unmocked test using axios to test the data returned from the end points that are (will be) in a seperate library.

as addition these are my setup files:

.babelrc

{
  "presets": [
    ["env",
      {
        "targets": {
          "node": "current"
        }
      }],
    "jest"
  ],
  "plugins": ["transform-async-to-generator"]
}

jest.config.js

module.exports = {
    setupFiles: ['./jest.setup.js'],
    snapshotSerializers: ['enzyme-to-json/serializer']
};

package.json

{
  "name": "polatis-app-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rimraf ./dist && webpack-dev-server --config webpack.dev.config.js",
    "prod": "rimraf ./dist && webpack --config webpack.production.config.js",
    "test": "jest --config jest.config.js --no-cache"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.39",
    "@babel/preset-env": "^7.0.0-beta.39",
    "autoprefixer": "^7.2.2",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^22.0.4",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-intl": "^2.3.1",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
    "babel-plugin-transform-es2015-constants": "^6.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-ie": "^6.7.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-es3": "^1.0.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.2.3",
    "core-js": "^2.5.3",
    "css-loader": "^0.28.7",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-cli": "^22.0.4",
    "node-sass": "^4.7.2",
    "postcss": "^6.0.14",
    "postcss-cssnext": "^3.0.2",
    "postcss-flexbugs-fixes": "^3.2.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.9",
    "raf": "^3.4.0",
    "react-hot-loader": "^3.1.3",
    "react-test-renderer": "^16.2.0",
    "regenerator-runtime": "^0.11.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-runtime": "^6.26.0",
    "bootstrap": "^3.3.7",
    "classlist-polyfill": "^1.2.0",
    "es5-shim": "^4.5.10",
    "file-loader": "^1.1.6",
    "history": "^4.7.2",
    "i18n-react": "^0.6.3",
    "intl": "^1.2.5",
    "js-cookie": "^2.2.0",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "save-dev": "^2.0.0"
  }
}
Question

Most helpful comment

Again, this is not a help forum. Please see the docs (https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string)

All 7 comments

You need to use testEnvironment: 'node' in your config. Also, make sure to return the promise from your test, or it will not wait for async work.

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

I thought it may of been an issue hence putting it in here, thank you SimenB for responding. will try what you mentioned out.
Can you do multi jest.config(urations)? as testEnvironment means I can not use jsdom.

Again, this is not a help forum. Please see the docs (https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string)

@quintons did you solve this ? i have the same issue with react-native jest and axios. can't figure out what the issue is here.... setting testEnvironment=node does not fix this

Make sure you are setting a testURL in your Jest config. The error is typically generated by jsdom when the URL is invalid.

@ovy9086 I had the same problem in a RN project, what happened was that I used the baseURL of Axios with a react-native-config somewhere in my project this is mocked. So the baseURL provided was empty, this was responsible for the test failure.

Double check the baseURL on your project, even try to hardcode them with a valid pattern of url like http://localhost.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mmcgahan picture mmcgahan  Â·  3Comments

kentor picture kentor  Â·  3Comments

hramos picture hramos  Â·  3Comments

ticky picture ticky  Â·  3Comments

withinboredom picture withinboredom  Â·  3Comments