jeudi 11 octobre 2018

How to test my javascript code in the browser using react? Tried Jest and Mocha - No success yet

I am developing a simple editor in the browser. My goal is to run unit tests on the code my users are writing in said online editor. I tried using Jest and Mocha to run tests on their code. There is no package or utility to make this work easily that i could find. This all needs to run on the clientside in the browser. No access to node.

Mocha supposedly works in browser : https://mochajs.org/#running-mocha-in-the-browser

I failed to succesfully integrate it with react though. I tried addind the scripts in the componentDidMount

  componentDidMount() {
    const script1 = document.createElement('script');
    const script2 = document.createElement('script');
    const script3 = document.createElement('script');
    const script4 = document.createElement('script');
    const script5 = document.createElement('script');
    const script6 = document.createElement('script');

    script1.src = 'https://unpkg.com/chai/chai.js';
    script2.src = 'https://unpkg.com/mocha@5.2.0/mocha.js';

    script1.async = true;
    script2.async = true;
    script3.async = true;
    script4.async = true;
    script5.async = true;

    script1.type = 'text/javascript';
    script2.type = 'text/javascript';
    script3.type = 'text/javascript';
    script4.type = 'text/javascript';
    script5.type = 'text/javascript';

    script3.innerHTML = 'mocha.setup(\'bdd\')';
    script4.innerHTML = `function sum(a, b) {
      return a + b;
    }
    `;
    script5.innerHTML = 'mocha.checkLeaks();mocha.run();';
    script6.innerHTML = `    describe('sum', function() {
      it('should return sum of arguments', function() {
        chai.expect(sum(1, 2)).to.equal(3);
      });
    });`;

    this.instance.appendChild(script1);
    this.instance.appendChild(script2);
    this.instance.appendChild(script3);
    this.instance.appendChild(script4);
    this.instance.appendChild(script5);
    this.instance.appendChild(script6);
  }

  render() {
    return (
      <div id="mocha" ref={el => (this.instance = el)} />
    );
  }

I keep getting errors though:

Uncaught TypeError: mocha.setup is not a function

Uncaught ReferenceError: describe is not defined

Help would be appreciated!

Aucun commentaire:

Enregistrer un commentaire