npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@moikaturns/import-pob-code

v1.0.0

Published

Import plain old browser code for testing

Downloads

1

Readme

import-pob-code

Import plain old browser code for unit testing in node.

The Problem

JavaScript files intended to run in a browser that aren't defined as a module can be problematic to unit test with node frameworks. The scripts are referred to variously as plain old JavaScript, browser script, module-less or non-modular code and so on. An attempt to unit test such a script in node might look like this:

src/script.js

function A() {
  this.do = function() {return 42};
}

test/script.test.js

require('./../src/script.js');
describe('A', () => {
  if('should provide the answer to life, the universe and everything', () => {
    const a = new A();
    expect(a.do()).toEqual(42);
  }
}

The test fails because A is undefined. Every top-level name script.js defines wants to dump itself into the global namespace of the browser when it executes. This isn't a fault, it's just that in a node context this is prevented from happening. The act of requiring a file in node results in its script being wrapped inside a function. The name A in this script therefore no longer ends up in the global scope, thereby hiding it from the test file.

Possible Solutions

Converting the files to JavaScript module syntax would work as browsers and node understand them, but might require quite a bit of refactoring. A cheap workaround could invole modifying the browser script so it recognises when it's running inside node and exports what's needed, this might not be pretty and the edits won't be adding much value to the script files themselves.

This Solution

This library provides a way of requiring the non-modular browser script from within node, one which supports a way to export what's needed from a script for unit testing that doesn't involve modifying the original script.

To fix the test failure above with this library is a one-line change to the test file, like so:

./test/script.test.js

const A = require('@moikaturns/import-pob-code').load({ file: './../src/script.js', exports: ['A']}).A;
describe('A', () => {
  if('should provide the answer to life, the universe and everything', () => {
    const a = new A();
    expect(a.do()).toEqual(42);
  }
}

The above example should run without error.

How It Works

The library's load method will synchronously read the target script specified by file then wrap it in a new function that returns an object containing references to the variables named by exports when the new function is invoked.

The load method can also be provided any number of variables in a context object that are made visible to the script when executed. This is useful to mock dependencies such as the DOM or 3rd party libraries the script expects to exist at runtime. See examples below.

Further Examples

See test files.

Usage

Installation:

npm install @moikaturns/import-pob-code --save-dev

For a simple example see 'This Solution' above.