jest.mock does not mock a module - javascript

In my test I do
import SendSMS from 'react-native-sms';
jest.mock('react-native-sms');
describe('_sendSMS', function() {
it('resolves with result sent', async () => {
SendSMS.send.mockImplementation((opts, callback) => {
callback(true, false, false);
});
...
})
});
and I get following error:
TypeError: _reactNativeSms.default.send.mockImplementation is not a function
package.json:
{
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest --verbose",
"flow": "flow",
"clear_jest": "jest --clearCache"
},
"dependencies": {
"axios": "0.16.2",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-app-link": "0.3.0",
"react-native-appsflyer": "1.1.12",
"react-native-branch": "2.1.0",
"react-native-device-info": "0.11.0",
"react-native-fabric": "0.5.0",
"react-native-fabric-twitterkit": "0.2.0",
"react-native-fbsdk": "0.7.0",
"react-native-google-signin": "0.11.0",
"react-native-navbar": "2.1.0",
"react-native-rating-requestor": "github:yihanseattle/react-native-rating-requestor#ipsy_fork_rating_requestor",
"react-native-simple-store": "1.2.0",
"react-native-sms": "1.5.0",
"react-native-video": "2.0.0",
"react-native-wkwebview-reborn": "1.20.0",
"react-navigation": "1.0.0-beta.11",
"url-parse": "1.1.3"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/generator": "^7.1.2",
"#babel/plugin-transform-exponentiation-operator": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.0.0",
"#babel/plugin-transform-react-jsx-source": "^7.0.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-unicode-regex": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/runtime": "^7.1.2",
"babel-jest": "^23.6.0",
"enzyme": "3.0.0",
"enzyme-adapter-react-16": "1.0.0",
"eslint": "3.19.0",
"eslint-config-rallycoding": "3.2.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-react": "6.10.3",
"eslint-plugin-react-native": "2.3.2",
"flow-bin": "0.79.1",
"invariant": "2.2.2",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.48.0",
"react-dom": "16.0.0-alpha.12",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
}
}
.babelrc:
{
"presets": ["module:metro-react-native-babel-preset"]
}
console.log(SendSMS, SendSMS.send) in the test file prints this:
{ send: [Function: send] } function send(options, callback) {var authorized;return regeneratorRuntime.async(function send$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:if (!(
_reactNative.Platform.OS === 'android')) {_context.next = 9;break;}_context.prev = 1;_context.next = 4;return regeneratorRuntime.awrap(
_reactNative.PermissionsAndroid.request(_reactNative.PermissionsAndroid.PERMISSIONS.READ_SMS));case 4:authorized
Any idea why jest.mock does not actually mock the module?

This provides a solution:
const mock = (mockFn: any) => mockFn;
it('resolves with result sent', async () => {
mock(SendSMS.send).mockImplementation((opts, callback) => {
callback(true, false, false);
});
...
})
From here

Related

TypeError: Cannot read property '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined React-test-renderer

I am using Jest with React Native and when I try to run a test I run in to the " TypeError: Cannot read property '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined" error. I am not sure why I am getting this. I am new to Jest and I am not sure if the it is set up correctly. Any help is much appreciated.
// package.json
{
"name": "App",
"version": "2.3.31",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest --verbose",
"lint": "eslint .",
"bpmn2workflow": "node scripts/bpmn2workflow.js",
"copy_audio": "node scripts/copy_audio_files.js",
"sentences": "node scripts/sentences_test.js",
"env:dev": "node scripts/set-env.js dev",
"env:stage": "node scripts/set-env.js stage",
"env:prod": "node scripts/set-env.js prod",
"create_local_audio_json": "node scripts/create_local_audio_file.js",
"create_workflows": "node scripts/bpmn2workflow.js && node scripts/create_local_audio_file.js"
},
"dependencies": {
"#babel/preset-env": "^7.13.12",
"#invertase/react-native-apple-authentication": "^1.1.2",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/audio-toolkit": "^2.0.3",
"#react-native-community/checkbox": "^0.4.2",
"#react-native-community/google-signin": "^4.0.3",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/picker": "^1.6.5",
"#react-native-community/push-notification-ios": "^1.6.0",
"#react-native-community/slider": "^3.0.3",
"#react-native-firebase/analytics": "^11.0.0",
"#react-native-firebase/app": "^11.0.0",
"#react-native-firebase/auth": "^11.0.0",
"#react-native-firebase/crashlytics": "^11.0.0",
"#react-native-firebase/firestore": "^11.0.0",
"#react-native-firebase/messaging": "^11.0.0",
"#react-native-firebase/remote-config": "^11.0.0",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.3.9",
"create-react-class": "^15.6.3",
"duration": "^0.2.2",
"firebase": "^7.23.0",
"firebase-messaging": "^1.0.6",
"format": "^0.2.2",
"format-duration": "^1.3.1",
"fs": "0.0.1-security",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"mp3-duration": "^1.1.0",
"music-metadata": "^7.0.1",
"nocache": "^2.1.0",
"react": "16.13.1",
"react-lodash": "^0.1.2",
"react-native": "0.63.4",
"react-native-background-timer": "^2.2.0",
"react-native-chart-kit": "^6.4.1",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-iap": "5.1.3",
"react-native-iaphub": "^6.0.3",
"react-native-keep-awake": "^4.0.0",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-push-notification": "^6.1.1",
"react-native-reanimated": "^1.9.0",
"react-native-router-flux": "^4.2.0",
"react-native-safe-area-context": "^1.0.2",
"react-native-screens": "^2.8.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-snap-carousel": "^4.0.0-beta.5",
"react-native-snap-slider": "^0.3.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-watch-connectivity": "^0.4.3",
"react-native-xml2js": "^1.0.3",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"watchman": "^1.0.0"
},
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/runtime": "^7.13.9",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "^17.0.2"
},
"jest": {
"preset": "react-native",
"automock": true,
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"transformIgnorePatterns": [
"node_modules/(?!(#react-native|react-native|react-native-iaphub)/)"
]
}
}
// test file
/**
* #format
*/
import 'react-native';
import React from 'react';
// Note: test renderer must be required after react-native.
import TestRenderer from 'react-test-renderer';
import Test from '../src/components/Test';
jest.mock("react-native", () => {});
jest.mock("react", () => {});
jest.mock("react-redux", () => {});
jest.mock("#react-navigation/core", () => {});
jest.mock("#react-navigation/native", () => {});
jest.mock("react-native-background-timer", () => {});
jest.mock("react-native-watch-connectivity", () => {});
jest.mock("react-native-router-flux", () => {});
jest.mock('#react-native-community/google-signin', () => {});
jest.mock('#react-native-firebase/remote-config', () => {});
jest.mock('#react-native-firebase/firestore', () => {});
jest.mock('react-native-iaphub', () => {});
jest.mock('../src/library/utils/InAppPurchase.js', () => {});
jest.mock('#react-native-community/async-storage', () => {});
jest.mock('#react-native-firebase/analytics', () => {});
jest.mock('#react-native-firebase/crashlytics', () => {});
jest.mock('#react-native-firebase/auth', () => {});
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
test('renders correctly', () => {
const tree = TestRenderer.create(<Test />).toJSON();
expect(tree).toMatchSnapshot();
});
// babel
module.exports = {
presets: ['module:metro-react-native-babel-preset', '#babel/preset-env'],
plugins: ['#babel/plugin-proposal-class-properties'],
};
Not sure the cause of the issue, but I just did renderer.create() and that got rid of the error.

ReferenceError: Component is not defined error on Jest and React Native

I am receiving the above error when trying to test the main App.js.
I was receiving the error "component not defined", but I added '#babel-preset/react' to my react native babel config and I am getting this error. I am new to Jest and using this testing library, so I am not 100% sure it is configured correctly, but I seem to be making some progress. Would I need to make my class components function components?
// test
/* eslint-disable no-undef */
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
jest.mock('react-native', () => {});
jest.mock('react', () => {});
jest.mock('react-redux', () => {});
jest.mock('../src/styles', () => {});
jest.mock('../src/components/common', () => {});
jest.mock('#react-navigation/core', () => {});
jest.mock('#react-navigation/native', () => {});
jest.mock('react-native-background-timer', () => {});
jest.mock('react-native-watch-connectivity', () => {});
jest.mock('react-native-router-flux', () => {});
jest.mock('#invertase/react-native-apple-authentication', () => {});
jest.mock('#react-native-community/google-signin', () => {});
jest.mock('#react-native-community/picker', () => {});
jest.mock('#react-native-firebase/remote-config', () => {});
jest.mock('#react-native-firebase/firestore', () => {});
jest.mock('react-native-iaphub', () => {});
jest.mock('../src/library/utils/InAppPurchase.js', () => {});
jest.mock('#react-native-community/async-storage', () => {});
jest.mock('#react-native-firebase/analytics', () => {});
jest.mock('#react-native-firebase/crashlytics', () => {});
jest.mock('#react-native-firebase/auth', () => {});
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
it('renders correctly', () => {
renderer.create(<App />);
});
// package.json
{
"name": "mindflow",
"version": "2.3.31",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest --verbose",
"lint": "eslint .",
"bpmn2workflow": "node scripts/bpmn2workflow.js",
"copy_audio": "node scripts/copy_audio_files.js",
"sentences": "node scripts/sentences_test.js",
"env:dev": "node scripts/set-env.js dev",
"env:stage": "node scripts/set-env.js stage",
"env:prod": "node scripts/set-env.js prod",
"create_local_audio_json": "node scripts/create_local_audio_file.js",
"create_workflows": "node scripts/bpmn2workflow.js && node scripts/create_local_audio_file.js"
},
"dependencies": {
"#babel/preset-env": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"#invertase/react-native-apple-authentication": "^1.1.2",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/audio-toolkit": "^2.0.3",
"#react-native-community/checkbox": "^0.4.2",
"#react-native-community/google-signin": "^4.0.3",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/picker": "^1.6.5",
"#react-native-community/push-notification-ios": "^1.6.0",
"#react-native-community/slider": "^3.0.3",
"#react-native-firebase/analytics": "^11.0.0",
"#react-native-firebase/app": "^11.0.0",
"#react-native-firebase/auth": "^11.0.0",
"#react-native-firebase/crashlytics": "^11.0.0",
"#react-native-firebase/firestore": "^11.0.0",
"#react-native-firebase/messaging": "^11.0.0",
"#react-native-firebase/remote-config": "^11.0.0",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.3.9",
"create-react-class": "^15.6.3",
"duration": "^0.2.2",
"firebase": "^7.23.0",
"firebase-messaging": "^1.0.6",
"format": "^0.2.2",
"format-duration": "^1.3.1",
"fs": "0.0.1-security",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"mp3-duration": "^1.1.0",
"music-metadata": "^7.0.1",
"nocache": "^2.1.0",
"react": "^17.0.2",
"react-lodash": "^0.1.2",
"react-native": "0.63.4",
"react-native-background-timer": "^2.2.0",
"react-native-chart-kit": "^6.4.1",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-iap": "5.1.3",
"react-native-iaphub": "^6.0.3",
"react-native-keep-awake": "^4.0.0",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-push-notification": "^6.1.1",
"react-native-reanimated": "^1.9.0",
"react-native-router-flux": "^4.2.0",
"react-native-safe-area-context": "^1.0.2",
"react-native-screens": "^2.8.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-snap-carousel": "^4.0.0-beta.5",
"react-native-snap-slider": "^0.3.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-watch-connectivity": "^0.4.3",
"react-native-xml2js": "^1.0.3",
"react-redux": "^7.2.0",
"react-test-renderer": "^17.0.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"watchman": "^1.0.0"
},
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/runtime": "^7.13.9",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.58.0"
},
"jest": {
"preset": "react-native",
"automock": true,
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"transformIgnorePatterns": [
"node_modules/(?!(#react-native|react-native|react-native-iaphub)/)"
]
}
}
//babel
module.exports = {
presets: ['module:metro-react-native-babel-preset', '#babel/preset-env', '#babel/preset-react'],
plugins: ['#babel/plugin-proposal-class-properties'],
};

TypeError: Cannot read property 'createContext' of undefined

Im trying to build my application using npm run build .
I get the error as
TypeError: Cannot read property 'createContext' of undefined .
I have made the following changes after checking for a solution
I tried upgrading the react and react dom to ^16.4 .
Still getting the same error .
I have defined in my component as react.default.createContext()
I did a console in my component and found react.default is undefined .
And it is in this part the error is occurring .
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const initStore = {
i18n: {},
query: {}
};
exports.AppContext = react_1.default.createContext(initStore);
exports.withAppContext = (Children) => {
return class App extends react_1.default.Component {
static async getInitialProps(ctx = {}) {
if (Children.hasOwnProperty('getInitialProps')) {
const context = Object.assign(ctx, {});
const childProps = (await Children.getInitialProps(context)) || {};
return Object.assign(childProps, {});
}
else {
return {};
}
}
render() {
return <exports.AppContext.Consumer>{app => <Child {...this.props} app={app}/>}</exports.AppContext.Consumer>;
}
};
};
I have shared my package.json file below
{
"name": "next-web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"browser": {
"fs": false,
"child_process": false,
"fork": false
},
"fork": false,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#types/react-transition-group": "^4.2.3",
"alertifyjs": "^1.13.1",
"apollo-cache-inmemory": "^1.6.5",
"apollo-client": "^2.6.8",
"apollo-link": "^1.2.13",
"apollo-link-context": "^1.0.19",
"apollo-link-error": "^1.1.12",
"apollo-link-http": "^1.5.16",
"apollo-link-retry": "^2.2.15",
"apollo-link-timeout": "^1.4.0",
"apollo-link-ws": "^1.0.19",
"apollo-utilities": "^1.3.3",
"aws-xray-sdk-core": "^2.5.0",
"babel-plugin-root-import": "^6.4.1",
"child_process": "^1.0.2",
"crypto-js": "^3.1.9-1",
"ctrip-apollo": "^4.4.3",
"date-fns": "^2.9.0",
"fs": "0.0.1-security",
"graphql": "^14.6.0",
"graphql-hooks-memcache": "^1.3.1",
"graphql-tag": "^2.10.1",
"isomorphic-fetch": "^2.2.1",
"jquery-param": "^1.0.2",
"js-cookie": "^2.2.1",
"koa": "^2.11.0",
"koa-bodyparser": "^4.2.1",
"koa-router": "^8.0.6",
"memcached": "^2.2.2",
"next": "^9.0.1",
"next-config": "^0.1.0",
"next-routes": "^1.4.2",
"next-server": "^9.0.5",
"polished": "^3.4.4",
"qrcode": "^1.4.4",
"react": "^16.12.0",
"react-adopt": "^0.6.0",
"react-apollo": "^3.1.3",
"react-app-rewired": "^2.1.5",
"react-copy-to-clipboard": "^5.0.2",
"react-day-picker": "^7.4.0",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "^16.12.0",
"react-lazyload": "^2.6.5",
"react-progressive-image": "^0.6.0",
"react-slick": "^0.25.2",
"react-transition-group": "^4.3.0",
"styled-components": "^5.0.0",
"styled-tools": "^1.7.1",
"subscriptions-transport-ws": "^0.9.16",
"ua-parser-js": "^0.7.21",
"webpack-node-externals": "^1.7.2",
"ycb": "^2.1.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"react-dev-utils": "^10.1.0"
}
}
Is it some sort of version issue ? im using Nextjs as framework over react also

How test JSX Vue component with Jest

I've following component (I simplified code) :
const Comp = Vue.component('Comp', {
render (h) {
// Other stuff ...
return (<div>
<div style={style}>
<div style={{ display : 'inline-block' }} />
</div>
</div>)
},
})
export default Comp
I wrote following unit test :
it('should be initialized', () => {
const addEventListener = spyOn(document, 'addEventListener')
const { vm } = shallowMount(Comp)
expect(addEventListener).toHaveBeenCalledWith('dragend', jasmine.any(Function))
expect(addEventListener).toHaveBeenCalledWith('keypress', jasmine.any(Function))
})
When I run unit tests with Jest, I've an error :
ReferenceError: dom is not defined
> 96 | return (<div>
| ^
97 | <div style={style}>
98 | <div style={{ display : 'inline-block' }} />
99 | </div>
My following babel.config.js file :
module.exports = (api) => {
return {
presets : ['#babel/preset-env', '#vue/babel-preset-jsx'],
plugins : [
'#babel/plugin-syntax-jsx',
['#babel/plugin-transform-react-jsx', { pragma : 'dom' }],
[
'module-resolver', {
root : ['./'],
alias : {
'#' : './src',
'~' : './examples',
},
},
],
],
}
}
And my Jest config file :
module.exports = {
coverageReporters : ['html'],
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
collectCoverageFrom : [
"src/**/*.{js,jsx}"
],
moduleNameMapper : {
"\\.(css|less|sass|scss)$": "<rootDir>/tests/__mocks__/styleMock.js"
},
moduleFileExtensions : ['js', 'jsx']
}
When I build project with rollup, I've no error, only with jest.
Did i miss something ?
UPDATE
My package.json file :
{
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#rollup/plugin-alias": "^2.2.0",
"#vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"#vue/babel-preset-jsx": "^1.1.0",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^7.0.0-bridge.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"codemirror": "^5.48.2",
"css-loader": "^3.2.0",
"docdash": "^1.0.3",
"eslint": "6.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jasmine": "^2.10.1",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"husky": "^3.0.8",
"jest": "^23.6.0",
"jquery": "^3.3.1",
"js-beautify": "^1.10.0",
"jsdoc": "^3.5.5",
"jsx-render": "^1.1.1",
"lint-staged": "^9.4.2",
"node-sass": "^4.13.0",
"rollup": "^1.26.4",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-scss": "^1.0.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.1.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"scripts": {
"test": "jest",
"build": "rollup -c"
},
"author": "",
"license": "ISC",
"husky": {
"hooks": {
"pre-push": "npm run test",
"pre-commit": "lint-staged"
}
}
}
Maybe it can be useful : my project wasn't created with vue-cli. I use Vue only for two components.
Could you try with the below setup.
Package.json
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest --watch"
},
"dependencies": {
"core-js": "^3.4.4",
"vue": "^2.6.10"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.8.3",
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jasmine": "^3.5.0",
"jest": "^25.1.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
]
}
}
Component
import Vue from "vue";
const Comp = Vue.component("Comp", {
mounted() {
document.addEventListener("click", () => {
});
},
render(h) {
// Other stuff ...
return (
<div>
<div >Hello World!</div>
<input type="text" id="someeid"></input>
<div id="result"></div>
</div>
);
}
});
export default Comp;
babel.config.js
module.exports = api => {
api.cache(false);
return {
presets: ["#babel/preset-env", "#vue/babel-preset-jsx"],
plugins: [
"#babel/plugin-syntax-jsx",
["#babel/plugin-transform-react-jsx", { pragma : 'dom' }],
[
"module-resolver",
{
root: ["./"],
alias: {
"#": "./src",
"~": "./examples"
}
}
]
]
};
};
test file
import { shallowMount } from "#vue/test-utils";
import Comp from "./Comp";
it("should be initialized", () => {
const addEventListener = spyOn(document, "addEventListener");
const { vm } = shallowMount(Comp);
expect(addEventListener).toHaveBeenCalledWith("click", , expect.any(Function));
});
codesandbox Example

Gulp Not Finishing a Task

My build task never calls the copy:build task because it looks like the transpile task doesn't return (I never see "Finished" for the transpile task in the console), so it never continues onto the last task:
require('babel-core/register');
var gulp = require('gulp'),
less = require('gulp-less'),
uglify = require('gulp-uglify'),
babel = require("gulp-babel"),
shell = require('gulp-shell'),
mocha = require('gulp-mocha'),
runSequence = require('run-sequence'),
browserify = require('gulp-browserify'),
rename = require('gulp-rename'),
del = require('del');
require('dotenv').config();
const { env } = process;
gulp.task('build', function (done) {
runSequence('clean', 'transpile', 'copy:build', done);
});
gulp.task('clean', function () {
return del(['./build', './dist']);
});
gulp.task('transpile', function () {
return gulp.src(['./src/**/*.js', '!./src/client/less/*.js'])
.pipe(babel())
.pipe(gulp.dest("build"));
});
gulp.task('copy:build', function () {
return gulp.src(['src/shared/**/*.json']).pipe(gulp.dest('build/shared'));
});
package.json
{
"name": "my-app",
"version": "0.0.1",
"description": "",
"main": "server.js",
"scripts": {
"dist": "gulp dist",
"start": "node dist/server.js",
"postinstall": "yarn run dist",
"test-backend": "gulp build && gulp spec-backend",
"test-frontend": "gulp build && yarn run flow && gulp spec-frontend",
"test-all": "gulp build && spec-all",
"build": "NODE_ENV=production gulp build",
"local": "NODE_ENV=development gulp dist && npm start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/me/my-app.git"
},
"author": "Me",
"license": "",
"bugs": {
"url": "https://github.com/me/my-app/issues"
},
"homepage": "https://github.com/me/my-app#readme",
"dependencies": {
"browserify": "^16.2.3",
"compression": "^1.7.3",
"connect-history-api-fallback": "^1.5.0",
"core-js": "^2.6.1",
"cors": "^2.8.5",
"del": "^3.0.0",
"dotenv": "^6.2.0",
"express": "^4.16.4",
"gulp-cli": "^2.0.1",
"gulp-if": "^2.0.2",
"gulp-less": "^4.0.1",
"gulp-rename": "^1.4.0",
"lodash": "^4.17.11",
"nock": "^10.0.5",
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-addons-create-fragment": "^15.6.2",
"react-compat": "^0.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.7.0",
"react-ga": "^2.5.6",
"react-grid-gallery": "^0.5.3",
"react-redux": "^5.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scroll": "^1.7.10",
"redux": "^3.6.0",
"redux-thunk": "^2.3.0",
"superagent": "^4.1.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/cli": "^7.1.5",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.1.5",
"babel-eslint": "^10.0.1",
"babel-preset-flow": "^6.23.0",
"babelify": "^10.0.0",
"chai": "^4.2.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^5.11.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.0",
"flow-bin": "^0.89.0",
"flowtypify": "^1.0.1",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-bundle-assets": "^2.29.0",
"gulp-mocha": "^6.0.0",
"gulp-shell": "^0.6.5",
"gulp-uglify": "^3.0.1",
"gulp-wait": "^0.0.2",
"jquery": "^3.1.1",
"jsdom": "^13.1.0",
"mocha": "^5.2.0",
"postcss": "^7.0.7",
"postcss-cli": "^6.1.0",
"run-sequence": "^2.2.1",
"sinon": "^7.2.2",
"supertest": "^3.3.0",
"watchify": "^3.11.0"
}
}
Here's the output I see in the console, notice you don't see "Finished" for the transpile task which is why it never runs the "copy:build" task:
So what happens is brings me back to the console after the last line Starting 'transpile'... as if it is done but it's obviously not, because it didn't show finished nor did it ever run my copy:build task.
Tried running the copy:build task directly, works fine. The problem is with the transpile script never even getting here:
I had to remove the return:
gulp.task('transpile', function () {
gulp.src(['./src/**/*.js', '!./src/client/less/*.js'])
.pipe(babel())
.pipe(gulp.dest("build"));
});

Categories

Resources