I ran into a problem when running a component test that has a line inside it:
const route = useRoute(). I get an error: Cannot read properties of undefined (reading 'path'). Here is the test:
describe('Tariff card', () => {
const options = {
props: {
name: 'test',
tariffId: 2,
price: 3990,
maxCompanies: 1,
maxCampaigns: 5,
tariffNum: 2,
isFree: false,
duration: 30,
},
global: {
plugins: [createTestingPinia()],
},
}
it('render tariff card', async () => {
jest.mock('vue-router', () => ({
useRoute: jest.fn(() => ({ path: '/' }))
}))
render(TariffCard, options)
})
})
Related
Error: Objects are not valid as a React child (found: object with keys {_id, name}). If you meant to render a collection of children, use an array instead.
Tried to fix this for days and no result.
i have a model
import mongoose from 'mongoose'
const CategoriesSchema = new mongoose.Schema({
name: {
type: String,
required: true,
trim: true
},
parent: {
type: mongoose.Types.ObjectId,
ref: 'categories'
},
},
{
timestamps: true
})
let Dataset = mongoose.models.categories || mongoose.model('categories', CategoriesSchema)
export default Dataset
and i have getCategories like this
[getCategories ]
const getCategories = async (req, res) => {
try {
const categories = await Categories.find().populate("parent", "name");
res.json({ categories });
}
catch (err)
{
return res.status(500).json({ err: err.message });
}
};
in my Globale state i have
export const DataContext = createContext()
export const DataProvider = ({children}) => {
const initialState = {
notify: {}, auth: {}, cart: [], modal: [], orders: [], users: [], categories: []
}
const [state, dispatch] = useReducer(reducers, initialState)
useEffect(() => {
getData('categories').then(res => {
if(res.err)
return dispatch({type: 'NOTIFY', payload: {error: res.err}})
dispatch({ type: 'ADD_CATEGORIES', payload: res.categories })
})
},[])
return(
<DataContext.Provider value={{state, dispatch}}>
{children}
</DataContext.Provider>
)
}
when i call categories throw:exception
when i change dispatch in Globale state like :
dispatch({ type: 'ADD_CATEGORIES', payload: [] })
i get no elements in array :
I am trying to implement #toast-ui/react-calendar, initially I was getting window is not defined but after implementing the fix I got here https://github.com/nhn/toast-ui.react-calendar/issues/39, I got this instead Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of __WEBPACK_DEFAULT_EXPORT__.
This is my curent code
CalendarPage.js
import React from 'react';
import Calendar from '#toast-ui/react-calendar';
import 'tui-calendar/dist/tui-calendar.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';
export default (props) => <Calendar {...props} ref={props.forwardedRef} />;
schedule>index.jsx
import { forwardRef, useCallback, useRef, useState } from 'react';
import dynamic from 'next/dynamic';
const TuiCalendar = dynamic(() => import('#components/calendars/CalendarPage'), { ssr: false });
const CalendarWithForwardedRef = forwardRef((props, ref) => (
<TuiCalendar {...props} forwardedRef={ref} />
));
const start = new Date();
const end = new Date(new Date().setMinutes(start.getMinutes() + 30));
const schedules = [
{
calendarId: '1',
category: 'time',
isVisible: true,
title: 'Study',
id: '1',
body: 'Test',
start,
end,
},
{
calendarId: '2',
category: 'time',
isVisible: true,
title: 'Meeting',
id: '2',
body: 'Description',
start: new Date(new Date().setHours(start.getHours() + 1)),
end: new Date(new Date().setHours(start.getHours() + 2)),
},
];
const calendars = [
{
id: '1',
name: 'My Calendar',
color: '#ffffff',
bgColor: '#9e5fff',
dragBgColor: '#9e5fff',
borderColor: '#9e5fff',
},
{
id: '2',
name: 'Company',
color: '#ffffff',
bgColor: '#00a9ff',
dragBgColor: '#00a9ff',
borderColor: '#00a9ff',
},
];
const SchedulePage = () => {
const cal = useRef(null);
const onClickSchedule = useCallback((e) => {
const { calendarId, id } = e.schedule;
const el = cal.current.calendarInst.getElement(id, calendarId);
console.log(e, el.getBoundingClientRect());
}, []);
const onBeforeCreateSchedule = useCallback((scheduleData) => {
console.log(scheduleData);
const schedule = {
id: String(Math.random()),
title: scheduleData.title,
isAllDay: scheduleData.isAllDay,
start: scheduleData.start,
end: scheduleData.end,
category: scheduleData.isAllDay ? 'allday' : 'time',
dueDateClass: '',
location: scheduleData.location,
raw: {
class: scheduleData.raw['class'],
},
state: scheduleData.state,
};
cal.current.calendarInst.createSchedules([schedule]);
}, []);
const onBeforeDeleteSchedule = useCallback((res) => {
console.log(res);
const { id, calendarId } = res.schedule;
cal.current.calendarInst.deleteSchedule(id, calendarId);
}, []);
const onBeforeUpdateSchedule = useCallback((e) => {
console.log(e);
const { schedule, changes } = e;
cal.current.calendarInst.updateSchedule(schedule.id, schedule.calendarId, changes);
}, []);
function _getFormattedTime(time) {
const date = new Date(time);
const h = date.getHours();
const m = date.getMinutes();
return `${h}:${m}`;
}
function _getTimeTemplate(schedule, isAllDay) {
var html = [];
if (!isAllDay) {
html.push('<strong>' + _getFormattedTime(schedule.start) + '</strong> ');
}
if (schedule.isPrivate) {
html.push('<span class="calendar-font-icon ic-lock-b"></span>');
html.push(' Private');
} else {
if (schedule.isReadOnly) {
html.push('<span class="calendar-font-icon ic-readonly-b"></span>');
} else if (schedule.recurrenceRule) {
html.push('<span class="calendar-font-icon ic-repeat-b"></span>');
} else if (schedule.attendees.length) {
html.push('<span class="calendar-font-icon ic-user-b"></span>');
} else if (schedule.location) {
html.push('<span class="calendar-font-icon ic-location-b"></span>');
}
html.push(' ' + schedule.title);
}
return html.join('');
}
const templates = {
time: function (schedule) {
console.log(schedule);
return _getTimeTemplate(schedule, false);
},
};
return (
<div className='App'>
<h1>Welcome to TOAST Ui Calendar</h1>
<CalendarWithForwardedRef
ref={cal}
height='1000px'
useCreationPopup={true}
useDetailPopup={true}
calendars={calendars}
schedules={schedules}
onClickSchedule={onClickSchedule}
onBeforeCreateSchedule={onBeforeCreateSchedule}
onBeforeDeleteSchedule={onBeforeDeleteSchedule}
onBeforeUpdateSchedule={onBeforeUpdateSchedule}></CalendarWithForwardedRef>
</div>
);
};
export default SchedulePage;
I do not what I am doing wrong here but I keep getting this error
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `__WEBPACK_DEFAULT_EXPORT__`.
Call Stack
createFiberFromTypeAndProps
node_modules\react-dom\cjs\react-dom.development.js (25058:0)
createFiberFromElement
node_modules\react-dom\cjs\react-dom.development.js (25086:0)
reconcileSingleElement
node_modules\react-dom\cjs\react-dom.development.js (14052:0)
reconcileChildFibers
node_modules\react-dom\cjs\react-dom.development.js (14112:0)
Turns out that the issue with my code was caused by clashing npm packages, I had react-big-calendar installed previously removing that fixed the issue
I need some help with modifying my reducer. I'm using Redux Toolkit and in one of the state slices I've got an object with some grouped settings:
initialState: {
...
userSettings: {mode: 2, subscription: false, setting3: 'text', setting4: 'another text'},
...
}
a reducer I have is:
setUserSettings: (state, action) => {
state.userSettings: action.payload
}
In different parts of a component, I'd update individual settings from the userSettings object:
dispatch(setUserSettings({ mode: 4 }))
in another place:
dispatch(setUserSettings({ setting3: 'some other text'})
How would I modify the reducer to be able to do it? Thanks
Since RTK use immer library underly, you can mutate the state by assigning directly. See Mutating and Returning State
import { configureStore, createSlice } from '#reduxjs/toolkit';
const settingsSlice = createSlice({
name: 'settings',
initialState: {
otherSettings: { ok: true },
userSettings: { mode: 2, subscription: false, setting3: 'text', setting4: 'another text' },
},
reducers: {
setUserSettings: (state, action) => {
state.userSettings = { ...state.userSettings, ...action.payload };
},
},
});
const { setUserSettings } = settingsSlice.actions;
const store = configureStore({ reducer: settingsSlice.reducer });
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch(setUserSettings({ mode: 4 }));
store.dispatch(setUserSettings({ setting3: 'some other text' }));
Output:
{
otherSettings: { ok: true },
userSettings: {
mode: 4,
subscription: false,
setting3: 'text',
setting4: 'another text'
}
}
{
otherSettings: { ok: true },
userSettings: {
mode: 4,
subscription: false,
setting3: 'some other text',
setting4: 'another text'
}
}
change your reducer to
setUserSettings: (state, action) => {state.userSettings={...state.userSettings,action.payload}}
what we did here is making a copy of the old state and then combine it with the new value you need to change
the new key of the object will override the old one
In the docs for testing incrementing todo ids, this assumes a predictable response.
In an example such as below, a unique id is generated.
How could this be tested?
This test passes, but I'm not sure if it's correct, shouldn't the id be defined based on what's in the prepare callback?
slice.js
add: {
reducer: (state, {payload}: PayloadAction<{id: string, item: Item}>) => {
state[payload.id] = payload.item
},
prepare: (item: Item) => ({
payload: {id: cuid(), item}
})
}
slice.test.js
it('should handle add', () => {
expect(
reducer(
{},
{
type: actions.add,
payload: {
id: 'id-here?',
item: {
other: 'properties...'
}
},
}
)
).toEqual({
'id-here?': {
other: 'properties...'
},
})
})
You can pull out the prepare function and also the reducer function into it's own constant and then test prepare in isolation:
todosSlice.js:
[...]
let nextTodoId = 0;
export const addTodoPrepare = (text) => {
return {
payload: {
text,
id: nextTodoId++
}
}
}
export const addTodoReducer = (state,
action) => {
const {id, text} = action.payload;
state.push({
id,
text,
completed: false
});
};
const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: {
prepare: addTodoPrepare,
reducer: addTodoReducer,
},
}
})
[...]
todosSlice.spec.js:
import todos, {addTodo, addTodoPrepare} from './todosSlice'
describe('addTodoPrepare',
() => {
it('should generate incrementing IDs',
() => {
const action1 = addTodoPrepare('a');
const action2 = addTodoPrepare('b');
expect(action1.payload).toEqual({
id: 0,
text: 'a'
})
expect(action2.payload).toEqual({
id: 1,
text: 'b'
})
})
})
describe('todos reducer',
() => {
[...]
})
For unit testing, NO, just test each reducer independently.
For integration testing and e2e testing, Yes.
I cannot pass variable ownProps from mapStateToProps to selector. My selector:
export const nameSelector = createSelector(
[
state => state.element.get('name')
],
(name) => !name.trim()
);
const mapStateToProps = (state, ownProps) => ({
disabledAfterSave: nameSelector(state)
});
And I need to have a selector:
export const nameSelector = createSelector(
[
state => state.element.get('name')
],
(name, ownProps) => !name.trim() && ownProps.showMessage
);
const mapStateToProps = (state, ownProps) => ({
disabledAfterSave: nameSelector(state, ownProps)
});
But now I get an error: ReferenceError: ownProps is not defined.
When I tried to pass it like below:
export const nameSelector = (ownProps) => createSelector(
[
state => state.element.get('name')
],
(name) => !name.trim() && ownProps.showMessage
);
the returned type is not bool but [Function selector].
How can I pass this argument to my selector?
Here's how to fix your selector and its usage:
export const nameSelector = createSelector(
[
state => state.element.get('name'),
(state, ownProps) => ownProps.showMessage
],
(name, showMessage) => !name.trim() && ownProps.showMessage
)
const mapStateToProps = (state, ownProps) => ({
disabledAfterSave: nameSelector(state, ownProps)
})
Here's a generic working example, in order to illustrate how you can pass props down to the selector:
const createSelector = Reselect.createSelector
// Selector: Get Active Users
const getUsers = createSelector([state => state.users], users => users.filter(u => u.active))
// Selector: Get Active Users by Country
// Here you can check how I pass the country prop
const getUsersByCountry = createSelector([getUsers, (state, props) => props.country],
(users, country) => users.filter(u => u.country === country))
// The state
const state = {
users: [
{ id: 1, name: 'Jordan', country: 'Bulgaria', active: true},
{ id: 2, name: 'Nadezhda', country: 'Bulgaria', active: true},
{ id: 3, name: 'Hristo', country: 'Bulgaria', active: false},
{ id: 4, name: 'Bobby', country: 'England', active: true},
{ id: 5, name: 'Kaloyan', country: 'Germany', active: true},
]
}
// Testing
console.log(getUsers(state))
console.log(getUsersByCountry(state, { country: 'Bulgaria' }))
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.min.js"></script>