babel-jest ES2015导入声明

Question

has anyone been writing jasmine / jest tests using es2015 syntax? how much shimming / polyfill / gerrymandering does it require?

i'm having trouble importing functions correctly. i have one module: …./utils/TweetUtils.js

'use strict';

export function getListOfTweetIds (tweets) {
  return Object.keys(tweets);
};

and one test suite:

…./__tests__/TweetUtils-test.js

'use strict';
jest.dontMock('../TweetUtils');
import * as TweetUtils from '../TweetUtils';

describe('Tweet utilities module', () => {

  it('has access to the TweetUtils methods', () => {

    let testObj = {a:'a',b:'b',c:'c'};
    // Passes
    expect(TweetUtils.getListOfTweetIds).toBeDefined();
    // Passes
    expect(typeof TweetUtils.getListOfTweetIds).toBe('function');
    // Fails
    expect(TweetUtils.getListOfTweetIds(testObj)).toBeTruthy();
  });
});

If I hack a console output into the suite with something like this: expect('').toBe(TweetUtils);

Jasmine reports this:

- Expected: '' toBe: {
      default: {
          getListOfTweetIds: Function
      },
      getListOfTweetIds: Function
  }

So it seems like the import statement is doing something, but it's clearly not importing my methods honestly. I get the same results when I import using the named function syntax: import {getListOfTweetIds} from '../TweetUtils'; But if I use the default syntax: import getListOfTweetIds from '../TweetUtils'; The second spec fails - it's no longer typeof function , but typeof object // => {default: Function}

I've been combing the docs and open-issues. There've been related issues for a few months, but the known issues don't seem right. I've tried importing my jest.dontMock statements to avoid hoisting, circa: https://github.com/babel/babel-jest/issues/16 but no dice.

Everything works if I modify TweetUtils.js to use module.exports = function… and bring it into the suite using const myFunction = require('../TweetUtils') , but it doesn't feel like I'm channeling the true ES2015 magic. Is everyone just dealing with wonky work-arounds right now while the ecosystem catches up to the new syntax?

Answer 1

As you said, import statements are hoisted and it causes problems with the jest auto-mocking feature (the module is imported before you tell jest to unmocked it).

TweetUtils.getListOfTweetIds is correctly imported but it's mocked, so each calls return undefined . That's why the third expectation fails.

Importing jest.dontMock statement could work (I tested it) but it sounds dirty to me (do you really want to create a "dontmock module" file for each test modules ?)

You have to use the require syntax for the tested module. Replace

import * as TweetUtils from '../TweetUtils';

by

const TweetUtils = require('../TweetUtils');

It was the same in jest example before I fixed it : jest#379

Answer 2

The issue seems to be with babel and not with jest . Try this solution.

If you are using 'create-react-app' then install these dev dependencies:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

And also update the .babelrc (create this file if it doesn't exist ) :

{
"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
      ]
}

And now both jest and npm test both work as they should.