Sinon: Browser script contains Nodejs module require statements

Created on 3 Dec 2019 · 6Comments · Source: sinonjs/sinon

Describe the bug
./node_modules/sinon/pkg/sinon.js, which according to documentation is meant for direct browser use, contains Nodejs module require statements.

To Reproduce

cat ./node_modules/sinon/pkg/sinon.js

Expected behavior
./node_modules/sinon/pkg/sinon.js should be pre-bundled for browsers. No calls to require().

Context (please complete the following information):

Library version: 7.5.0

Source

charlesmulder

Most helpful comment

Consider me enlightened. Much appreciated.

charlesmulder on 3 Dec 2019

👍2

All 6 comments

This issue report does not actually list any problems arising in any runtime, which is not strange, given that it seems it has not been tested in any browser that shows a problem 😉 If you are new to how bundling CommonJS modules works, then I can understand seeing require calls in the code might cause confusion. The important thing here is that we have _not created a Node project_. We have created a library composed of modules following the CommonJS way of creating modules. This was introduced by Node, but there are tools (such as WebPack and Browserify) that introduce shims (small alternative implementations) that makes the same code work when bundled together and run in the browser. So when we say the code works in all browsers, it is because we know they do, testing them daily 😸

You might find the homepage for Browserify and our build script instructive for learning more about this.

The important takeaway is that dropping our script into a script tag is enough to get started and will setup a window.sinon global that you can start using straight away. You can also use the newer module import way, supported by newer browser. See this test for more info.

fatso83 on 3 Dec 2019

You might also be interested in this issue: #2168

fatso83 on 3 Dec 2019

Thanks for the response. So, before including ./node_modules/sinon/pkg/sinon.js in my browser, I should bundle it using Webpack or Browserify?

That's what it looks like to me, but the documentation led me to believe, I could use it as is.

<!-- Direct browser use -->
<script src="./node_modules/sinon/pkg/sinon.js"></script>
<script>
// Access the `sinon` global...

</script>

charlesmulder on 3 Dec 2019

I am not saying any such thing. You can do exactly as the docs says. This is a modification of Mocha's docs, as a more feature complete example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mocha Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>
    <script src="https://unpkg.com/sinon/pkg/sinon.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();

       console.log("Is Sinon present?", typeof sinon === "object"? "YES": "NO");
    </script>

    <script src="test.array.js"></script>
    <script src="test.object.js"></script>
    <script src="test.xhr.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

/pkg/sinon.js _is_ the bundle. We do that for you.

I just pasted that into a index.html file, started a webserver and checked it out in a browser. The console prints (index):19 Is Sinon present? YES :smile_cat:

fatso83 on 3 Dec 2019

👍1

Do feel free to supply a PR with changes to our docs!
https://github.com/sinonjs/sinon/blob/master/docs/CONTRIBUTING.md

fatso83 on 3 Dec 2019

Consider me enlightened. Much appreciated.

charlesmulder on 3 Dec 2019

👍2

Was this page helpful?

0 / 5 - 0 ratings