How to use ospec for components having imports

[mchampaneri]

I'm not able to test components having import statement with it.

var mq = require("mithril-query");
var o = require("ospec");

import { Alert } from "[path]";

o.spec("Alert", function() {
  o("Alert", function() {
    var out = mq(Alert, { type: "danger" }, ["You got it"]);
    out.should.have("alert-danger");
    out.should.contain("You got it");
  });
});

o.run();

I'm getting error as below

import {Alert} from "[path]"
^^^^^^

SyntaxError: Cannot use import statement outside a module

[dead-claudia]

How are you trying to execute it?

[mchampaneri]

How are you trying to execute it?

node version: v15.3.0

My components are written in JSX

I'm doing npm test.

package.json

 ...
 ...
"scripts": {
    "test": "ospec --preload --experimental-modules ./test-setup.js"
  },
 ...
 ... 

test-setup.js

import {default as o} from 'ospec'
import {default as jsdom} from 'jsdom'
var dom = new jsdom.JSDOM("", {
    // So we can get `requestAnimationFrame`
    pretendToBeVisual: true,
})

// Fill in the globals Mithril needs to operate. Also, the first two are often
// useful to have just in tests.
global.window =  require("mithril/test-utils/browserMock.js")(); //dom.window
global.document = dom.window.document
global.requestAnimationFrame = dom.window.requestAnimationFrame

import m from 'mithril'
global.window.m = m
// And now, make sure JSDOM ends when the tests end.
o.after(function() {
    dom.window.close()
})

alerts.js

import SVGIcon from './svgs';
/**
 * Alerts of all types
 */

const Alert = () => {
  return {
    view(vnode) {
      return (
        <div
          class={`alert alert-${vnode.attrs.type} clearfix fade show d-flex justify-content-between`}
        >
          <div class="flex-fill">{vnode.children}</div>
        </div>
      );
    },
  };
};

const ClosableError = () => {
  return {
    view(vnode) {
      return vnode.attrs.visibe ? (
        <div class="alert alert-danger  show-this clearfix  show d-flex justify-content-between text-wrap my-2">
          <span class="align-self-center flex-fill">{vnode.attrs.text}</span>
          <div class="s-action-close-alert mt-n1  ml-auto">
            <button
              title="Close"
              onclick={() => {
                !vnode.attrs.close_func();
              }}
              class="round-btn-xs bg-transparent"
              data-dismiss="alert"
              aria-label="Close"
            >
              <SVGIcon name="Close" class="s-svg-sm fill-secondary"></SVGIcon>
            </button>
          </div>
        </div>
      ) : null;
    },
  };
};

export { Alert, ClosableError };

[pygy]

@mchampaneri Sorry for the delay, the project was moribund.

Is this still relevant?

[pygy]

@mchampaneri You can either turn your tests into modules:

// with {"type":"module"} in tests/package.json

import o from "ospec"

// I didn't test this beyond verifying it doesn't crash on import
import mq from "mithril-query" 

import { Alert } from "[path]";

o.spec("Alert", function() {
  o("Alert", function() {
    var out = mq(Alert, { type: "danger" }, ["You got it"]);
    out.should.have("alert-danger");
    out.should.contain("You got it");
  });
});

o.run();

or use a dynamic import() in a o.before() hook:

var mq = require("mithril-query");
var o = require("ospec");

o.spec("Alert", function() {
  let Alert

  o.before(async() {
    Alert = await import('[path]')
  })

  o("Alert", function() {
    var out = mq(Alert, { type: "danger" }, ["You got it"]);
    out.should.have("alert-danger");
    out.should.contain("You got it");
  });
});

o.run();