I am using withTranslation() in my react class component at the last line when I am exporting my application.
But it is giving below error.
Please check the last line.
import React from 'react';
import { Input, Form, Row, Container, Card } from 'reactstrap';
import '../../../../node_modules/bootstrap/dist/css/bootstrap.css';
import baseUrl from '../../../base.js';
import ConfirmDlg from '../../Utils/Common/ConfirmDlg';
import { css } from 'react-emotion';
import { PropagateLoader } from 'react-spinners';
import i18next from 'i18next';
import i18n from '../../../i18n';
import { withTranslation } from 'react-i18next';
var request = require('superagent');
const override = css`
display: block;
margin: 0 auto;
border-color: red;
`;
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
errorMessage: '',
isConfirmDlgOpen: false,
isLoading: false,
};
}
render() {
const { errorMessage, isConfirmDlgOpen, isLoading } = this.state;
const { t } = this.props;
return <div className="wrapper">{t('Accueil')}</div>;
}
}
export default withTranslation()(MyComponent);
is there any other way to handle the same. its legacy application in which I am using translation
My package.json file.
{
"name": "myapplication",
"version": "0.1.0",
"private": true,
"scripts": {
"test": "mocha --compilers js:babel-core/register --recursive",
"start": "dotenv -e .env -- webpack-dev-server --hot --define process.env.dev --inline --port 80 --host localhost",
"build": "webpack -p --config webpack.config.js --env.prod"
},
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bootstrap": "^3.3.7",
"bowser": "^2.1.0",
"classnames": "^2.1.3",
"copy-webpack-plugin": "^4.2.1",
"core-js": "^2.5.4",
"create-react-class": "^15.7.0",
"css-hot-loader": "^1.3.4",
"css-loader": "^0.28.7",
"draft-js": "^0.10.5",
"extract-text-webpack-plugin": "^3.0.2",
"fbemitter": "^2.0.0",
"file-loader": "^1.1.5",
"findup-sync": "^0.1.2",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"html-react-parser": "^0.4.2",
"html-webpack-plugin": "^2.30.1",
"html2canvas": "^1.0.0-alpha.10",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"jquery": "^3.2.1",
"jspdf": "^1.3.5",
"moment": "^2.13.0",
"prop-types": "^15.7.2",
"randomstring": "^1.1.5",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-anything-sortable": "^1.7.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker-thecodingmachine": "^5.0.1",
"react-bootstrap-native-slider": "^2.0.1",
"react-bootstrap-slider": "^2.0.0",
"react-bootstrap-table": "^4.1.5",
"react-color": "^2.13.8",
"react-datepicker": "1.6.0",
"react-dropzone": "^4.2.3",
"react-i18next": "^11.15.1",
"react-modal": "^3.1.2",
"react-router-dom": "^4.2.2",
"react-scrollable-anchor": "^0.6.1",
"react-select": "^1.0.0-rc.5",
"react-signature-pad": "^0.0.6",
"react-spinners": "^0.4.5",
"react-star-rating": "^1.4.2",
"react-stepzilla": "^4.6.3",
"react-textarea-autosize": "^5.1.0",
"react-toastify": "^3.1.0",
"react-toggle": "^4.0.2",
"react-transition-group": "^1.2.1",
"reactjs-localstorage": "0.0.5",
"reactstrap": "^4.8.0",
"reflux": "^6.4.1",
"style-loader": "^0.19.0",
"superagent": "^3.8.1",
"transform-class-properties": "^1.0.0-beta",
"url-loader": "0.6.2",
"xss": "^0.3.4"
},
"peerDependencies": {
"react": "^16.0.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "6.23.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-register": "6.26.0",
"canvas": "1.6.7",
"css-loader": "^0.28.7",
"dotenv-cli": "2.0.1",
"draftjs-to-html": "^0.8.3",
"immutable": "^3.8.1",
"jsdom": "11.2.0",
"mocha": "^3.3.0",
"mocha-jsdom": "^1.1.0",
"node-libs-browser": "^2.0.0",
"node-sass": "^4.5.3",
"react-draft-wysiwyg": "1.10.12",
"react-hot-loader": "^1.2.7",
"react-tools": "0.13.3",
"sass-loader": "^6.0.6",
"source-map": "^0.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.4"
}
}
You should use it like this:
export default withTranslation(MyComponent);
run with this code and got no error
import React from "react";
import { withTranslation } from "react-i18next";
class MyComponent extends React.Component {
constructor(props: any) {
super(props);
this.state = {
username: "",
password: "",
errorMessage: "",
isConfirmDlgOpen: false,
isLoading: false
};
}
render() {
const { t } = this.props;
console.log(t);
return <div className="wrapper">{t("xx")}</div>;
}
}
export default withTranslation()(MyComponent);
might be other mistake?
Related
These are my setup files
Router.js
import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';
const routes = [{
path: 'main/publish/tasks',
component: MyComponent
}]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
index.js
import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';
const app = createApp(MainApp);
app.use(router);
configureCompat({
// default everything to Vue 2 behavior
MODE: 2,
});
app.mount('.vue-app');
MainApp.vue
<template>
<router-view />
</template>
<script>
export default{
name: 'MainApp'
}
</script>
Edit:
MyComponent.vue
<template>
<div> Hello world </div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
package.json
{
"name": "Demo Project",
"version": "6.0.0",
"dependencies": {
"#vue/compat": "^3.2.39",
"#vue/compiler-sfc": "^3.2.39",
"core-js": "3.1.2",
"mitt": "^3.0.0",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.41",
"vue-carousel": "^0.18.0",
"vue-click-outside": "^1.1.0",
"vue-color": "^2.8.1",
"vue-custom-element": "^3.3.0",
"vue-debounce": "^2.6.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"#types/jest": "^28.1.8",
"#types/node": "^14.14.45",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"#vue/test-utils": "^1.3.0",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"license-checker": "^25.0.1",
"mini-css-extract-plugin": "^0.12.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.3.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.0.18",
"typescript": "^4.0.8",
"vue-jest": "^3.0.7",
"vue-loader": "^17.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^5.7.3"
},
"resolutions": {
"lodash": "^4.17.21"
},
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js",
"test": "jest src"
}
}
This code setup leads me to this error
Can anyone help me what I'm doing wrong? Everything works when I remove <router-view/>. I can render component fine by importing and adding it to MainApp.vue. But cannot get it rendered through <router-view/>.
I am running into issue in a jest unit test when I try to mount it. The Error I get is: TypeError: Cannot read property 'child' of undefined
wrapper = mount(
<ExportTemplateModal {...props} open={true} onClose={onClose} />
);
and here is the ExportTemplateModal
interface IExportTemplateModalProps {
open: boolean;
onClose(...args: any[]): any;
}
export class ExportTemplateModal extends React.Component<Props, State> {
render() {
return (
<Select
onChange={(value) => {
const selectedSupplier = projectSuppliers.find(
(ps) => ps.supplierId === value
);
const projectSupplierIds = supplierMap[value] || [];
this.setState({...});
}}
>
{options}
</Select>
);
}
}
here is the package.json, I have tried to change the react version and react-dom and ran npm install but it did not work. I am not sure where I am doing wrong. If I export export default Component as any it stops complaining but I do not know if that is the fix because in my unit tests I get another error which it complains about the React wrapper, this is the error => Error: ReactWrapper::state() can only be called on class components
"dependencies": {
"#amzn/pb-central-gql-schema": "*",
"#amzn/pb-central-ui-components": "^1.0.0",
"#hookform/resolvers": "^1.3.7",
"#react-icons/all-files": "^4.1.0",
"#testing-library/dom": "^8.13.0",
"#testing-library/react-hooks": "^8.0.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"emotion": "^10.0.27",
"is-hotkey": "^0.1.8",
"is-url": "^1.2.4",
"jest-environment-jsdom-sixteen": "^2.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.differenceby": "^4.8.0",
"lodash.escaperegexp": "^4.1.2",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.set": "^4.3.2",
"lodash.sortby": "^4.7.0",
"lodash.uniqueid": "^4.0.1",
"office-ui-fabric-react": "^7.107.0",
"react-hook-form": "^6.15.7",
"react-i18next": "^11.18.3",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"slate": "^0.60.8",
"slate-history": "^0.59.0",
"slate-react": "^0.60.8"
},
"peerDependencies": {
"#amzn/meridian": "*",
"#amzn/meridian-tokens": "*",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"date-fns": "^2.16.1"
},
"devDependencies": {
"#amzn/brazil": "*",
"#amzn/meridian": "*",
"#amzn/meridian-tokens": "*",
"#babel/core": "^7.6.0",
"#babel/helper-validator-identifier": "7.10.4",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/plugin-transform-typescript": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#babel/preset-typescript": "^7.12.1",
"#babel/runtime": "7.4.5",
"#sheerun/mutationobserver-shim": "^0.3.3",
"#storybook/addon-actions": "^6.0.26",
"#storybook/addon-essentials": "^6.0.26",
"#storybook/addon-info": "5.3.21",
"#storybook/addon-knobs": "^6.0.26",
"#storybook/addon-links": "^6.0.26",
"#storybook/addons": "^6.0.26",
"#storybook/react": "^6.0.26",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/date-fns": "^2.6.0",
"#types/enzyme": "^3.10.7",
"#types/history": "^4.7.8",
"#types/is-url": "^1.2.4",
"#types/jest": "^26.0.24",
"#types/lodash.clonedeep": "^4.5.6",
"#types/lodash.differenceby": "^4.8.6",
"#types/lodash.get": "^4.4.6",
"#types/lodash.isempty": "^4.4.6",
"#types/lodash.isequal": "^4.5.5",
"#types/lodash.set": "^4.3.6",
"#types/lodash.sortby": "^4.7.6",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.2.0",
"#types/storybook-react-router": "^1.0.1",
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.19",
"date-fns": "^2.16.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "7.11.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-react": "^7.21.5",
"file-loader": "^6.2.0",
"fs-extra": "^5.0.0",
"globby": "^8.0.1",
"history": "^4.10.1",
"husky": "^4.3.8",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
"jest-transform-stub": "^2.0.0",
"jest-when": "^3.2.1",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"prettier-plugin-organize-imports": "^1.1.1",
"react-to-typescript-definitions": "^1.2.0",
"storybook-react-router": "^1.0.8",
"typescript": "^4.2.4",
"webpack-cli": "^4.2.0"
},
"npm-pretty-much": {
"publishDir": "",
"runRelease": "always"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"src/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
}
I have tried:
running npm i react#18 react-dom#18 #types/react#18 #types/react-dom#18
removing node_module and npm install again
played around with imports
any help would be appreciated.
There are a few things you can check to fix this issue:
Make sure that the component is being imported correctly and the path to the component is correct.
Check if the component is being rendered in the correct place in the parent component.
Make sure that the component is not being rendered conditionally based on the state or props of the parent component.
Check the version of react and enzyme-adapter-react-16, it should be compatible with the version of react you are using.
Check if all the dependencies of the component are installed and imported properly.
It is also important to check the component by adding console.log inside the component to check if it is working fine.
I just upgrade my project to react 18.1.0 and try to check the new hook useTransition but I get this error Cannot resolve symbol 'useTransition' and I don't know why
This is my package.json :
"dependencies": {
"#date-io/core": "^2.10.7",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/base": "^5.0.0-alpha.64",
"#mui/lab": "^5.0.0-alpha.76",
"#mui/material": "^5.2.7",
"#mui/styles": "^5.2.3",
"#mui/x-data-grid": "^5.2.1",
"#testing-library/dom": "4.2.0",
"autosuggest-highlight": "^3.1.1",
"autosuggest-highlight-with-opts": "^3.1.2",
"axios": "^0.24.0",
"cookie": "^0.4.1",
"core-js": "^3.20.2",
"date-fns": "^2.19.0",
"exifr": "^7.1.3",
"exifreader": "^4.1.1",
"js-cookie": "^3.0.1",
"jss-rtl": "^0.3.0",
"lodash": "^4.17.21",
"material-ui-phone-number": "^3.0.0",
"moment": "^2.29.1",
"npm": "^8.3.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",}
this is my index.js:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App/>
);
this is how I tried to use this hook
import React, {useContext, useMemo,useTransition} from "react";
const [isPending,startTransition] = useTransition()
what I'm doing wrong?
I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM
These dependencies were not found:
#firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`.
and asking me to install firebase doing: npm install --save #firebase firebase firebase/firestore. which I did many times, but still the same error.
Here is my package.JSON:
{
"name": "Project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"firebase": "^7.13.1",
"node-pre-gyp": "^0.14.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
node -v = 16.12.1
npm -v =6.14.4
Any idea ?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import firebase from "#firebase";
import "./components/firebaseInit";
Vue.config.productionTip = false;
let app;
firebase.auth().onAuthStateChanged(function(user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
});
}
});
firebaseInit.js
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked.
I don't know why, but it worked!
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'
initializeApp(firebaseConfig)
I am using mocha to test my react components. I set up the package.json like so
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "NODE_ENV=test mocha './app/**/*.spec.js' --compilers js:babel-core/register --require testSetup.js",
"test:watch": "npm test -- --watch",
"start": "NODE_ENV=dev node server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"aphrodite": "^0.2.0",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"css-loader": "^0.23.1",
"enzyme": "^2.2.0",
"eslint": "^2.6.0",
"eslint-plugin-react": "^4.2.3",
"expect": "^1.16.0",
"jsdom": "^8.2.0",
"mocha": "^2.4.5",
"mocha-jsdom": "^1.1.0",
"node-sass": "^3.4.2",
"npm-install-webpack-plugin": "^3.0.0",
"react-addons-test-utils": "^0.14.8",
"react-dom": "^0.14.8",
"react-hot-loader": "^1.3.0",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-notifier": "^1.3.0"
},
"dependencies": {
"axios": "^0.9.1",
"cuid": "^1.3.8",
"delay": "^1.3.1",
"fecha": "^2.1.0",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"intl": "^1.1.0",
"lodash": "^4.6.1",
"react": "^0.14.8",
"react-addons-shallow-compare": "^0.14.8",
"react-dom": "^0.14.8",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"react-router-redux": "^4.0.0",
"redux": "^3.3.1",
"redux-crud": "^1.0.0",
"redux-saga": "^0.9.5",
"reselect": "^2.2.1",
"seamless-immutable": "^5.1.1",
"url-loader": "^0.5.7"
}
}
And here is the test file Selector.spec.js used to test a Selector.jsx component:
import React from 'react';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import expect from 'expect';
import Selector from './Selector.jsx';
describe('Selector Component', function () {
const setup = (optionalProps={}) => {
const props = {
onChange: sinon.spy(),
value: '3',
values: ['1','2','3','4'],
...optionalProps
}
const output = mount(<Selector {...props} />)
return {
output,
props,
}
}
describe('when using scalar values', function () {
it('should allow all props to be passed down', () => {
const { output, props } = setup()
const actual = output.props()
const expected= props
expect(actual).toEqual(expected)
});
});
});
And finally, the Selector.jsx itself:
import React, { PropTypes } from 'react';
import map from 'lodash/map';
const Selector = ({
onChange,
value,
values, // [{value, name}]
}) => (
<select onChange={e=>onChange(e.target.value)}
value={value}
>
{values[0].value
? map(values, (val,i) =>
<option
key={i}
value={val.value}
>
{val.name} boo!
</option>
)
: map(values, val =>
<option
key={val}
value={val}
>
{val}
</option>
)
}
</select>
)
Selector.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
values: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.any.isRequired,
name: PropTypes.string,
})),
PropTypes.array
]).isRequired,
};
export default Selector;
So what happens now is that whenever I save the test file, Selector.spec.js, it reruns the test, but none of the changes I have made to the source file get picked up by the test, I have to ctrl+c to kill the test and restart it. Is there any reason why this is happening?
Thank you!