lundi 22 janvier 2018

React test with insertIntoDocument gives the component without its functions

I'm learning React and trying to create a test but the following occurs:

FAILED TESTS:
  test
    testing test function
      Chrome 63.0.3239 (Linux 0.0.0)
    TypeError: testClass.test is not a function
        at Context.eval (webpack-internal:///97:22:24)

I have the Test class, this has only just a function, called test I want to test:

const React = require('react');
const createReactClass = require('create-react-class');

const TestClass = createReactClass({
  test: function() {
    return 0;
  },

  render() {
    return (
      <div>

      </div>
    );
  }
});

And this is the test I've written but not working. If I print out the testClass variable the Object is OK but has no functions. If I write a test: expect(TestClass).toBeTruthy(); it runs successfully, no errors. But when I try to use its function:

const React = require('react');
const ReactDOM = require('react-dom');
const expect = require('expect');
const ReactTestUtils = require('react-dom/test-utils');

const TestClass = require('TestClass');

describe('test', () => {
  it('testing test function', () => {
    var testClass = ReactTestUtils.renderIntoDocument(<TestClass />);
    const expected = 0;
    const actual = testClass.test();
    expect(actual).toBe(expected);
  });
});

And I have these dependencies:

  "scripts": {
    "test": "karma start",
    "start": "node server.js"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "create-react-class": "^15.6.2",
    "express": "^4.16.2",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "url-search-params-polyfill": "^2.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.9",
    "expect": "^22.1.0",
    "foundation-sites": "^6.4.3",
    "jquery": "^3.3.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.9",
    "mocha": "^5.0.0",
    "node-sass": "^4.7.2",
    "react-addons-test-utils": "^16.2.0",
    "react-test-renderer": "^16.2.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.2",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0"
  }

I found on some forums that using jsdom could help. If that is my problem, please could you give me a working example how to use it?

Aucun commentaire:

Enregistrer un commentaire