mardi 22 août 2017

ReactJs app with Jest and enzyme throwing error / new tests fail

Please help me get rid of the error below (using jest and enzyme for unit testing for reactjs app)

I'm trying to figure out this error which I get with every new test I add, whatever I try to test (even most basic - if component exists, with the same code which worked with other components before) it throws the same error with every new component. I'm not sure what I changed, but old tests pass and new ones give me this error :

  TypeError: Cannot read property 'options' of undefined

      at new Translate (node_modules/react-i18next/dist/commonjs/translate.js:72:52)
      at node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:294:18
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:75:12)
      at ShallowComponentWrapper._constructComponentWithoutOwner (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:293:16)
      at ShallowComponentWrapper.mountComponent (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:187:21)
      at Object.mountComponent (node_modules/react-test-renderer/lib/shallow/ReactReconciler.js:45:35)
      at ReactShallowRenderer._render (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:138:23)
      at _batchedRender (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:85:12)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:60:14)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:112:18)
      at ReactShallowRenderer.render (node_modules/enzyme/build/react-compat.js:171:37)
      at node_modules/enzyme/build/ShallowWrapper.js:128:26
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/shallow/Transaction.js:143:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
      at ReactShallowRenderer.unstable_batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:130:25)
      at performBatchedUpdates (node_modules/enzyme/build/ShallowWrapper.js:103:21)
      at node_modules/enzyme/build/ShallowWrapper.js:127:9
      at withSetStateAllowed (node_modules/enzyme/build/Utils.js:284:3)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:126:38)
      at shallow (node_modules/enzyme/build/shallow.js:19:10)
      at Object.<anonymous> (src/components/Session/Session.test.js:13:43)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>

example of test for a random component:

import React from 'react'
import { shallow } from 'enzyme'
import expect from 'expect'
import Session from './index'

describe('<Session />', () => {

    it('exists ', () => {
        expect(shallow (<Session />).length).toEqual(1);
    });

    it("should be on a loading state", () => {
        const wrapper = shallow(<Session />);
        expect(wrapper.state().loading).toEqual(true);
    });

});

.babelrc :

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }],
    "react",
    "es2015",
    "stage-2"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy"
  ]
}

package.json :

{
  "name": "___",
  "version": "0",
  "description": "____",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "start": "webpack-dev-server --host 0.0.0.0 --config ./config/webpack.config.dev.js",
    "build": "NODE_ENV=production webpack --config ./config/webpack.config.prod.js",
    "build-analyse": "NODE_ENV=production NODE_ANALYSE=true webpack --config ./config/webpack.config.prod.js",
    "css-lint": "stylelint -s less 'src/**/*.less'",
    "js-lint": "standard",
    "js-lint-fix": "standard --fix",
    "clean": "rimraf dist",
    "sca": "npm run js-lint && npm run css-lint"
  },
  "repository": {
    "type": "git",
    "url": "xxx.x"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "chai": "^3.2.0",
    "chai-http": "^1.0.0",
    "css-loader": "^0.28.1",
    "enzyme": "^2.9.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^20.0.4",
    "jest-css-modules": "^1.1.0",
    "jsdom": "^9.12.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "mocha": "^3.2.0",
    "mocha-junit-reporter": "^1.13.0",
    "mocha-loader": "^1.1.1",
    "react-addons-test-utils": "^15.5.1",
    "react-test-renderer": "^15.6.1",
    "redux-devtools": "^3.4.0",
    "rimraf": "^2.6.1",
    "standard": "^10.0.2",
    "style-loader": "^0.17.0",
    "stylelint": "^7.10.1",
    "stylelint-config-standard": "^16.0.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-bundle-analyzer": "^2.4.0",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^4.0.0-alpha.6",
    "bundle-loader": "^0.5.5",
    "country-list": "^1.1.0",
    "debug": "^2.6.6",
    "expect": "^1.20.2",
    "express": "^4.15.3",
    "i18n": "^0.8.3",
    "i18next": "^8.4.3",
    "i18next-browser-languagedetector": "^2.0.0",
    "i18next-xhr-backend": "^1.4.2",
    "iplocation": "^5.0.0",
    "json-loader": "^0.5.7",
    "moment": "^2.18.1",
    "oauth2-client-js": "0.0.15",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-i18next": "^4.8.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.1",
    "react-scroll": "^1.5.4",
    "react-scrollable-anchor": "^0.4.2",
    "react-webstorage": "0.0.4",
    "redux": "^3.7.2",
    "request": "^2.81.0",
    "user-agent-parser": "^0.6.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
      "\\.(css|less)$": "<rootDir>/tools/assetsTransformer.js"
    },
    "testRegex": "\\.(test|spec)\\.(tsx?|js?)$",
    "roots": [
      "<rootDir>/src/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!@veneer/core)"
    ]
  },
  "standard": {
    "globals": [
      "__DEV__"
    ]
  }
}

setup.js for test setup :

var jsdom = require('jsdom')


global.document = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.window = document.defaultView
global.navigator = {userAgent: 'nodes.js'}

Aucun commentaire:

Enregistrer un commentaire