I'm trying to run tests for my React application using Jest, but my tests keep on failing due to an error saying that require.context is not a function. I am looking for a replacement for that functionality that Jest will not choke on. I am trying to dynamically require and modify some *.vue file from Vue.jsto be used later on in my application. In addition to this, I occasionally get errors that don't recognize the format of the .vue files and say that they can't be parsed. This is the code in question:

function inject(p) {
    p.methods = Object.assign({}, p.methods, stub.methods);
    return p;
} 

let req = require.context('./', false, /\.vue$/);
ponents.forEach(function (ponent) {
    try {
        let filePath = __dirname + "\\" + ponent + '.vue';
        let injected = inject(req(filePath));
        Vueponent(getComponentName(ponent), injected);

        let appComponent = {
            name: injected.name,
            props: {
                autopletion: {
                    metadata: getComponentName('template'),
                    score: xTemplatesScore,
                    attributes: injected.props || []
                }
            }
        };

        appComponents.push(appComponent);
    } catch (err) {
        console.log(err);
        console.error('Vue file was not found for ponent:' + ponent + '. Please rename your files accordingly ( ponent-name.vue )');
    }
});

I'm trying to run tests for my React application using Jest, but my tests keep on failing due to an error saying that require.context is not a function. I am looking for a replacement for that functionality that Jest will not choke on. I am trying to dynamically require and modify some *.vue file from Vue.jsto be used later on in my application. In addition to this, I occasionally get errors that don't recognize the format of the .vue files and say that they can't be parsed. This is the code in question:

function inject(p) {
    p.methods = Object.assign({}, p.methods, stub.methods);
    return p;
} 

let req = require.context('./', false, /\.vue$/);
ponents.forEach(function (ponent) {
    try {
        let filePath = __dirname + "\\" + ponent + '.vue';
        let injected = inject(req(filePath));
        Vue.ponent(getComponentName(ponent), injected);

        let appComponent = {
            name: injected.name,
            props: {
                autopletion: {
                    metadata: getComponentName('template'),
                    score: xTemplatesScore,
                    attributes: injected.props || []
                }
            }
        };

        appComponents.push(appComponent);
    } catch (err) {
        console.log(err);
        console.error('Vue file was not found for ponent:' + ponent + '. Please rename your files accordingly ( ponent-name.vue )');
    }
});

• javascript
• reactjs
• vue.js
• jestjs

• 4 Possible duplicate of How can I mock Webpack's require.context in Jest? – Nelaina Commented Dec 4, 2017 at 21:21

1 Answer 1

If someone still run into this issue, you need to know that require.context is a webpack-specific feature, so it doesn't work in jest.

You can try to mock it, like someone already provided as an answer in this How can I mock Webpack's require.context in Jest? SO question. But you can't use it without any workaround.