CODEWITHSUNDEEP
javascriptreactjsreduxjestjsreact-scripts
Melchia
Melchia

Reputation: 24274

Jest test passes locally but fails in azure devops

I have a react application using react-scripts 3.2.0

This is my test :

jest.mock('./../shared/utils/getRequestWithDispatchUsing', () => ({
  __esModule: true,
  default: () => () => () => () => 'getRequestWithDispatchUsing is success',
}));

  describe('getContractsUsing', () => {
    const dispatch = jest.fn(action => action);
    const fetch = jest.fn();
    const clientNumber = 'clientNumber';
    beforeEach(() => {
      jest.clearAllMocks();
    });

    it('should perform getRequestWithDispatchUsing', () => {
      const actualContract = getContractsUsing(fetch, clientNumber)(dispatch);
      expect(actualContract).toEqual('getRequestWithDispatchUsing is success');
    });
  });

And this is my function:

export const getContractsUsing = (fetch, clientNumber) => dispatch => {
  const apiContractsUrl = getContractsApiUrl();
  const body = {
    customerNumber: clientNumber,
  };

  return getRequestWithDispatchUsing(fetch)({
    url: apiContractsUrl,
    body,
    featureName: SELECT_CONTRACTS_NAVIGATION,
  })(dispatch)(contractsRequested, contractsReceived, contractsRequestFailed);
};

The test works perfectly locally but fails in Azure DevOps. Although I'm installing the same dependencies in CI using npm ci.

my package.json:

{
  "name": "app",
  "version": "2.3.1",
  "private": true,
  "jest": {
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/index.{js,jsx}",
      "!**/*.{stories.js,demo.js}",
      "!**/build/**",
      "!**/mocks/**",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!src/setupTests.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },
  "dependencies": {
    "analytics-js": "^0.2.0",
    "classnames": "^2.2.5",
    "currency-formatter": "^1.4.2",
    "lodash": "^4.17.15",
    "moment": "^2.22.1",
    "mw.validation": "^1.0.9",
    "prop-types": "^15.6.1",
    "raf": "^3.4.0",
    "react": "^16.12.0",
    "react-scripts": "~3.2.0",
    "react-app-polyfill": "^1.0.5",
    "react-cookies": "^0.1.0",
    "react-datepicker": "~1.4.0",
    "react-dom": "^16.12.0",
    "react-moment-proptypes": "^1.5.0",
    "react-redux": "^5.0.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.1.1",
    "react-scroll": "^1.7.9",
    "react-transition-group": "^2.2.1",
    "recompose": "^0.26.0",
    "redux": "^3.6.0",
    "redux-persist": "^5.9.1",
    "redux-thunk": "^2.2.0",
    "url-search-params-polyfill": "^4.0.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.0.0",
    "@storybook/addon-links": "^5.0.0",
    "@storybook/addons": "^5.0.0",
    "@storybook/react": "^5.0.0",
    "bluebird": "^3.5.2",
    "concurrently": "^3.5.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "^3.4.3",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-prettier": "2.6.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-react": "^7.5.1",
    "husky": "^0.14.3",
    "istanbul": "^0.4.5",
    "jest-fetch-mock": "^2.1.2",
    "lint-staged": "^4.3.0",
    "node-sass": "^4.9.2",
    "prettier": "^1.8.2",
    "redux-mock-store": "^1.5.4",
    "webpack-bundle-analyzer": "^3.3.2"
  },
  "scripts": {
    "test": "react-scripts test --env=jsdom",
    "test-coverage": "react-scripts test --env=jsdom --coverage --watchAll=false",
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "engines": {
    "node": ">=12.0.0",
    "npm": ">=6.0.0"
  },
  "browserslist": [
    ">0.2%",
    "ie 11",
    "not dead",
    "not op_mini all"
  ]
}

here's the log of the failing test in CI:

getContractsUsing › should perform getRequestWithDispatchUsing

expect(received).toEqual(expected) // deep equality

Expected: "getRequestWithDispatchUsing is success" Received: {}

 183 |     it('should perform getRequestWithDispatchUsing', () => {
 184 |       const actualContract = getContractsUsing(fetch, clientNumber)(dispatch);
 185 |       expect(actualContract).toEqual('getRequestWithDispatchUsing is success');
     |                              ^
 186 |     });
 187 |   });
 188 | });

 at Object.<anonymous> (src/SelectContracts/SelectContracts.actions.spec.js:185:30)

Edit Here's my node version

node -p process.versions
{
  node: '12.14.0',
  v8: '7.7.299.13-node.16',
  uv: '1.33.1',
  zlib: '1.2.11',
  brotli: '1.0.7',
  ares: '1.15.0',
  modules: '72',
  nghttp2: '1.39.2',
  napi: '5',
  llhttp: '1.1.4',
  http_parser: '2.8.0',
  openssl: '1.1.1d',
  cldr: '35.1',
  icu: '64.2',
  tz: '2019c',
  unicode: '12.1'
}

Upvotes: 4

Views: 4211

Answers (1)

Melchia
Melchia

Reputation: 24274

For some reasons in CI the jest.mock doesn't work. I had to change the path of the package to make it work. It's tricky cause you need to try multiple combination before making it work in CI, although all of them work locally. In my case I used:

jest.mock('./../shared/utils', () => ({
  __esModule: true,
  default: () => () => () => () => 'getRequestWithDispatchUsing is success',
}));

PS: I'm using Azure Devops with a windowsBuild

Upvotes: 1

Related Questions