[Bug Report] ReferenceError: _Message is not defined in jest tests

[doutatsu]

Element UI version

2.10.1

OS/Browsers version

Mac High Sierra

Vue version

2.6.10

Reproduction Link

https://jsfiddle.com

Steps to reproduce

• create a vue component with import { Message } from 'element-ui';
• Call Message.info('test') inside the vue component
• Create a jest test, that directly interacts with code that calls Message.info('test')
• Run jest tests

What is Expected?

import { Message } from 'element-ui' works without issues during my testing. Or being able to do a simple manual mock of 'element-ui'.

What is actually happening?

I get a ReferenceError: _Message is not defined error. It happens either in tests or inside the actual vue file. That is not a case for any other node modules. I tried doing all kinds of mocks (manual mock, automatic mock, I tried to spy on it...) but I was unable to get that to work.

I would be fine not using mocks, but simple imports don't work either inside the vue file itself, so my tests just fail.

[wacky6]

You need to fix webpack loaders.

On-demand import from element-ui requires additional configuration: https://element.eleme.io/#/en-US/component/quickstart#on-demand

[doutatsu]

You need to fix webpack loaders.
@wacky6 Its only not working in testing. I have imports working normally when running the app, as I used cli to install it.

[wacky6]

testing environment usually has saperate loader/env configuration.

[doutatsu]

Double checking the docs, I am modifying babel config to have on-demand importing:

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
};

Is this not a global configuration, that will be applied to all environments? Do I have to just specify the same configuration for all environments manually (I'd think not)? Can you perhaps provide an example of correct configuration @wacky6?

[wacky6]

Which configuration is used depends on the particular testing framework / configuration you are using. I can not give exact advice on this, just a hint on where to look at.

[doutatsu]

It would be great to see a working example, I've tried all the various Jest configuration options (for example I thought it might have been transformIgnorePatterns option), looked into Babel as well as Webpack... I've been trying to fix this for weeks now, which is why I am here out of desperation.

[doutatsu]

Still banging my head against this issue, I've tried numerous things, also made a StackOverflow question with some more details: https://stackoverflow.com/questions/57639448/elementui-tests-throw-referenceerror-message-is-not-defined

Would love to hear from anyone who uses on-demand loading and Jest for testing

[iamkun]

You can use the test environment in babel to use different config file

[doutatsu]

You can use the test environment in babel to use a different config file

That is not really the answer to this issue, as it's not just about specifying the plugin configuration for test env. For everyone out there who would ever encounter the same issue (and avoid trying to debug this for days as I did), this is what actually had to be done:

1. Update your babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
  "env": { "test": { "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] } }
};

2. Possibly remove transformIgnorePatterns from your jest.config.js (you probably could just add an exception, pointing at element-ui)

This is what I had to do specifically when using Vue CLI. There is some specific Babel configuration in there, as it uses babel-preset-app. You can dive into it to understand the intricacies of it.

So thanks @wacky6 for pointing me in the right direction, although it still took days and another person to help find the solution. I think having some testing documentation in Element UI would really help people out...

[doutatsu]

Here is my full jest.config.js, just for reference:

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.(js|jsx)?$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  testMatch: [
    '**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  collectCoverage: true,
  coverageReporters: ['lcov', 'text-summary'],
};

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nguernse]

Ran into a similar issue, however, the solution above did not work for me. Was wondering if anyone has come across another solution that worked?

Prerequisite: using vue test utils to install Jest: https://vue-test-utils.vuejs.org/installation/#using-vue-test-utils-with-jest-recommended

Steps to replicate error:

Step 1:
Create a component TestComponent.vue:

<template>
  <div>
    <el-button
      data-test="button"
      @click="count++"
    >
      Count: {{ count }}
    </el-button>
  </div>
</template>

<script>
import { Button } from 'element-ui';

export default {
  name: 'TestComponent',
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      count: 0,
    };
  },
};
</script>

Step 2:
Then run the unit testtestComponent.spec.js with yarn test:unit testComponent:

import { mount } from '@vue/test-utils';
import TestComponent from '@/components/TestComponent.vue';

describe('Test Component', () => {
  test('component renders', () => {
    const wrapper = mount(TestComponent);

    expect(wrapper.exists()).toBe(true);
  });
});

Step 3:
The unit test fails with the error message: ReferenceError: _Button is not defined

Temp Solution:
If I change how the component is registered:
[Button.name]: Button -> "el-button": Button

Then the unit test works as expected.

Question:
I can do this as an alternative solution, but I'd rather not retroactively update all component imports. Does anyone have suggestions on configuring Jest unit tests to work with element-ui components?

Also, why is this error happening? I searched the element-ui repo and _Button is only defined in the scss, so I assume this is a styling issue with Jest.