如何在jest中使用reselect createSelector函数进行测试？
在使用 Jest 测试 reselect 的 createSelector 函数时，你需要确保你的测试覆盖了选择器的输入和输出。reselect 的 createSelector 函数用于创建记忆化的选择器，这些选择器可以从 Redux 状态中派生数据。
以下是一个示例，展示如何在 Jest 中测试使用 createSelector 创建的选择器。
示例代码
假设你有一个 Redux 状态和一个选择器如下：
// selectors.js
import { createSelector } from 'reselect';
const getItems = (state) => state.items;
const getFilter = (state) => state.filter;
export const getFilteredItems = createSelector(
[getItems, getFilter],
(items, filter) => {
return items.filter(item => item.includes(filter));
}
);测试代码
你可以使用 Jest 来测试这个选择器。以下是一个示例测试文件：
// selectors.test.js
import { getFilteredItems } from './selectors';
describe('getFilteredItems selector', () => {
it('should return filtered items based on the filter', () => {
const state = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: 'ap'
};
const expected = ['apple', 'grape'];
const result = getFilteredItems(state);
expect(result).toEqual(expected);
});
it('should return all items if filter is empty', () => {
const state = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: ''
};
const expected = ['apple', 'banana', 'grape', 'orange'];
const result = getFilteredItems(state);
expect(result).toEqual(expected);
});
it('should return an empty array if no items match the filter', () => {
const state = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: 'xyz'
};
const expected = [];
const result = getFilteredItems(state);
expect(result).toEqual(expected);
});
it('should memoize the result for the same input', () => {
const state = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: 'ap'
};
const result1 = getFilteredItems(state);
const result2 = getFilteredItems(state);
expect(result1).toBe(result2); // Same reference
});
it('should recompute the result if the input changes', () => {
const state1 = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: 'ap'
};
const state2 = {
items: ['apple', 'banana', 'grape', 'orange'],
filter: 'ba'
};
const result1 = getFilteredItems(state1);
const result2 = getFilteredItems(state2);
expect(result1).not.toBe(result2); // Different reference
expect(result2).toEqual(['banana']);
});
});解释
- 基本测试：测试选择器在不同过滤条件下的输出是否正确。
- 记忆化测试：测试选择器是否正确记忆化结果，即对于相同的输入，选择器应返回相同的引用。
- 重新计算测试：测试选择器在输入变化时是否重新计算结果。
运行测试
确保你已经安装了 Jest，然后在项目根目录下运行以下命令来执行测试：
npx jest或者，如果你已经在 package.json 中配置了 Jest 脚本，可以运行：
npm test通过这种方式，你可以确保你的 reselect 选择器在不同情况下的行为是正确的，并且记忆化功能也正常工作。
相关·内容
1回答
我用Reselect创建了一个简单的Redux选择器。选择器获取数组中的最后一个对象。
在中，测试示例是使用断言库构建的，而不是Expect库，但是我的应用程序起源于rather，所以我有Expect和Jest。
无论如何，不管我如何编写选择器测试，它都会挂在嵌套还原器：TypeError: Cannot read property 'arrayOfObj' of undefined上。
Selectors.js
import { createSelector } from 'reselect'
const getArrayOfObj = (state) =&
浏览 2提问于2017-07-30得票数 4
回答已采纳
1回答
我想再选一次。我想用身份证买我的购物车。
reselect.ts
import { createSelector } from "reselect";
import { RootState } from "../store";
export const shoppingCarts = (state: RootState) => state.ShoppingCart;
export const getCartById = (state: any, id: string) => createSelector(
shoppingCarts,
s
浏览 4提问于2022-05-06得票数 0
我是新来重新选举的，我明白这是必要的。我觉得很棒。然而，在我的例子中，它似乎无缘无故地增加了很多额外的代码。也许我做错了。
前一个组件：
const mapStateToProps = (state) => {
return {
day: state.filters.day,
minDate: state.filters.minDate,
maxDate: state.filters.maxDate,
};
};
现在选择器：
import { createSelector } from 'reselect'
浏览 3提问于2017-10-24得票数 1
回答已采纳
1回答
redux选择器的单元测试
、、、、
请建议我如何在react中为下面的selector.js文件编写单元测试
import {createStructuredSelector, createSelector} from 'reselect'
import {List, OrderedMap, fromJS, Map} from 'immutable'
const kpi_graphs = (state) => state.getIn(['myReducer', 'kpi_graphs'], List())
const show_chart = (state)
浏览 3提问于2018-10-24得票数 0
我尝试在我的Redux应用程序中使用reselect库中的selectors。
我的选择器文件如下所示：
import { createSelector } from 'reselect'
const postsSelectors = state => state.global.posts.allPostse;
export const getPosts = createSelector(
[ postsSelectors ],
(posts) => posts
);
然后我尝试在我的组件中使用，如下所示：
const mapStateToProps =
浏览 1提问于2017-02-17得票数 9
回答已采纳
我想要创建一个回忆录选择器，它将在redux存储中的状态更改时自动更新。
我在这里读到了有关Reselect's createSelector的文章：
我看到mapStateToProps被用来将选择器连接到商店。我目前只使用带钩子的redux (useDispatch和useSelector)，不使用connect(mapStateToProps, mapDispatchToProps)。
有没有一种方法可以使用createSelector，但仍然不使用connect？如果没有，是否有其他方法来创建一个回忆录选择器？
浏览 3提问于2019-12-24得票数 10
回答已采纳
我理解‘重新选择’背后的回忆录概念，并正在使用它来编写我的Redux选择器，但我不完全确定createSelector如何“知道”组件选择器的数据何时发生变化，以及在这些‘子选择器’中包含其他函数调用是否会干扰createSelector的回忆录。
问题是，在“子选择器”(也就是我要传递给createSelector的函数)中，我需要执行一些基本检查，确认JSON数据树的部分不是unedefined (为此使用了ramda库)，还需要按名称选择JSON数据树的一部分。也就是说，在“子选择器”getParksData中，我调用existsAt和nameToBlockData，它们位于其他模块中。
浏览 2提问于2019-02-03得票数 0
我正在阅读的文档，并被reselect卡住了。下面的代码创建了一个选择器，文档中说，如果我们想在两个VisibleTodoList组件中使用它，那么它就不能正常工作。
import { createSelector } from 'reselect'
const getVisibilityFilter = (state, props) => state.todoLists[props.listId].visibilityFilter
const getTodos = (state, props) => state.todoLists[props.listId].
浏览 1提问于2017-12-21得票数 6
回答已采纳
2回答
按照重新选择的文档上的示例：
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items
const subtotalSelector = createSelector(
shopItemsSelector,
items => items.reduce((acc, item) => acc + item.value, 0)
)
在一个典型的redux应用程序中，如果用户更新了subtotalSelector，即使这对结果没
浏览 0提问于2016-12-22得票数 2
如何在ngrx存储中不使用reselect createSelector和方法从中获取状态
export const getBookCollection = createSelector(getBookEntities, getCollectionBookIds, (entities, ids) => { return ids.map(id => entities[id]); });
constructor(store: Store<fromRoot.State>) { this.books$ = store.select(fromRoot.getBookC
浏览 2提问于2017-06-25得票数 0
回答已采纳
我正在学习reselect的用法，但我对在容器中使用带记忆的选择器的方式感到困惑。
我有一个叫做Summary的组件，它收到了3个道具，那就是subtotal, tipAmount , total。
看起来像是这个export const Summary = ({ subtotal = 0, tipAmount = 0, total = 0 })=>{...}.And，那些道具被注入到一个专用的container中，我用下面的代码调用了它SummaryContainer。
import { connect } from 'react-redux';
import { Su
浏览 3提问于2021-05-20得票数 2
import { createSelector } from 'redux-starter-kit'
const getTodos = (state: any) => state.todos;
const blah = createSelector(getTodos, (todos: any) => {
return todos
})
我已经使用库reselect创建了我遇到的问题的最简单的再现。为了方便起见，此版本的reselect是从redux-starter-kit移植的。在我的Typescript代码中，我在getTodos参数的createS
浏览 2提问于2019-10-03得票数 0
3回答
我想使用reselect和redux-form从redux获取值。问题是我不知道如何把getFormValues和reselect结合起来。我似乎无法访问createSelector中的状态。所以我想不出在重新选择中使用redux-form的选择器的方法。
例如：
// How to access the state here?
const getFoo = createSelector(
[getBar],
(bar) => {
// return something
}
)
redux中的选择器是这样工作的：
getFormValues('formName
浏览 43提问于2018-03-06得票数 6
回答已采纳
选择器在多个组件实例中使用并依赖于组件属性时的The React-Redux documentation provides this example。 import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'
const makeNumOfTodosWithIsDoneSelector = () =>
createSelector(
sta
浏览 38提问于2020-06-18得票数 6
我对选择器很陌生。我创造了以下几个方面：
import { createSelector } from 'reselect';
const getValues = (state) => state.grid; // [3, 4, 7, 3, 2, 7, 3,...]
const getTiles = (state) => state.tiles; // [0, 1, 0, 1, 0, 0, 1,...]
// counts selected tiles (ie. adds up all the 1s)
export const getSelected = cre
浏览 7提问于2017-04-14得票数 2
回答已采纳
4回答
我收到以下错误：substate is undefined。然而，我不确定为什么substate在我的选择器中是未定义的。有没有人能帮我弄清楚可能出了什么问题？
选择器：
import { createSelector } from 'reselect';
/**
* Direct selector to the organization state domain
*/
const selectOrganizationDomain = () => (state) => state.get('organization');
/**
* Oth
浏览 2提问于2016-12-31得票数 0
1回答
import { createSelector } from 'reselect'
export const selectUser = createSelector(
[state => state.user],
user => user
)
const { user } = useSelector(state => selectUser(state)) 我尝试在react应用程序中防止不必要的重新渲染。我想使用reselect冻结我的user对象。但是当我加载页面时，用户对象是以异步的方式从后端来的，reselect将这个值冻结为undefin
浏览 18提问于2020-04-27得票数 0
我在我的react-native项目中使用了重新选择库。我有以下代码。 import { createSelector } from 'reselect';
import { ApplicationState } from 'types/reducer.types';
const selectAuth = ({ auth }: ApplicationState) => auth;
export const selectFirstName = createSelector([selectAuth], auth => auth.user?.fir
浏览 35提问于2020-11-05得票数 0
回答已采纳
我在ReactJs代码中使用了reselect。下面是代码片段。由于文件很大，我省略了其中不必要的代码。
import { createSelector } from 'reselect';
const todoSelector = state => state.todo.todos;
const searchTermSelector = state => state.todo.searchTerm;
const searchViewSelector = state => state.todo.userView
export const filteredT
浏览 0提问于2020-06-15得票数 0
我想说"mySelector返回一个字符串“。我能用Flowtype做这件事吗？
import { createSelector } from 'reselect';
const mySelector = createSelector([anotherSelector], () => 'foo');
浏览 2提问于2017-11-15得票数 0
回答已采纳
2回答
我正在使用和来避免对每个更改进行去denormalize，但我不知道这是否真的改进了什么。
import { createSelector } from 'reselect'
import { denormalize } from 'denormalizr'
import { challenge as schema } from './challenge.schema'
const getState = (state) => state
export const getChallenge = createSelector(getStat
浏览 8提问于2016-06-14得票数 2
回答已采纳
1回答
我的react/redux应用程序中有以下代码： import { createSelector } from 'reselect';
const selectMembers = state => state.membersData;
const makeSelectLessonSets = createSelector(
selectMembers,
substate => substate.get('myData').toJS()
); 问题是有时myData还没有定义，所以substate.get('myData'
浏览 22提问于2021-06-16得票数 1
回答已采纳
import { createSelector } from 'reselect';
let exampleState = {
shop: {
matchingWord: "bmw",
cars: [
{ name: 'bmw', value: 130, comments: "expensive car" },
{ name: 'mercedes', value: 295, comments:"good looking" },
{ name
浏览 3提问于2021-02-01得票数 0
回答已采纳
在我的项目中，我有一个相当复杂的选择器结构(有些选择器可能有多达5个层次的嵌套)，所以其中一些很难通过传递输入状态进行测试，我想模拟输入选择器。然而，我发现这是不可能的。
以下是最简单的例子：
// selectors1.js
export const baseSelector = createSelector(...);
-
// selectors2.js
export const targetSelector = createSelector([selectors1.baseSelector], () => {...});
我想在我的测试套件中拥有：
beforeEach(() =
浏览 0提问于2019-04-15得票数 23
回答已采纳
我有一个普通的选择器，用于获取状态的一部分：
export const getAllPosts = state => {
return state.posts;
};
如果我使用重新选择来包装选择器：
import { createSelector } from 'reselect';
export const allPosts = createSelector(
getAllPosts,
(posts) => posts
);
它是否有任何意义，如提高性能？在我看来，包装是不必要的。
浏览 2提问于2017-11-07得票数 12
回答已采纳
在我对“新当选”是如何工作的理解中，可能存在一个空白。
如果我正确理解它，下面的代码：
const getTemplates = (state) => state.templates.templates;
export const getTemplatesSelector = createSelector(
[getTemplates],
templates => templates
);
同样(或更好)，在不失去任何东西的情况下，可以写成：
export const getTemplatesSelector = (state) => state.templates
浏览 3提问于2018-03-02得票数 1
回答已采纳
2回答
尝试使用Redux的重选库，如下所示：
// selectors.js
import { createSelector } from "reselect";
const loggedIn = state => {
return state.language.loggedIn;
};
export const loggedInSelector = createSelector(loggedIn);
用法如下：
import React from "react";
import { connect } from "react-redux"
浏览 1提问于2018-07-12得票数 0
1回答
我回顾了回购，我不明白reselect的用法。
据我理解，createSelector函数接受两个接受相同参数的函数。
例如：
const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent
const taxSelector = createSelector(
subtotalSelector,
taxPercentSelector,
(subtotal, taxPercent) => subtotal *
浏览 2提问于2017-06-30得票数 1
回答已采纳
在我的Redux商店里，我有一个笔记列表。我想
过滤掉我创建的音符
按创建日期/标题/等对这些注释进行排序。
我想分开逻辑过滤和排序到自己的函数，以使代码更易于维护。
我读过，并提出了下面的结构。
import { createSelector } from 'reselect';
const sortNotesBy = ({notes, sortBy}) => {
return notes.sort((a, b) => {
if (sortBy === TITLE) {
//dueDate date - createdAt
浏览 3提问于2020-11-22得票数 1
我不确定如何从redux迁移到钩子，就分派操作和从存储检索状态而言，因为没有提供官方指南。这条路对吗？
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { createSelector } from 'reselect'
import { actions, selectors } from 'data'
import TemplateComponent from '.
浏览 5提问于2019-07-08得票数 1
回答已采纳
1回答
我在react项目中使用了不变的JS，我想在选择器文件中使用get方法，但是我的"getAllAppointments“和"getQuery”函数未能识别它。
import {createSelector} from 'reselect'
import {get} from 'immutable'
const getAllAppointments = state => state.get('allAppointments')
const getQuery = state => state.get('qu
浏览 1提问于2019-02-26得票数 0
回答已采纳
这是我的选择器，我可以在选择器中获取数据，但是不知道如何将它调用到视图(组件)中，
import {todos} from '../reducers/todos';
import { createSelector } from 'reselect'
var visibilityFilter='SHOW_ALL';
var getVisibilityFilter = (state) => visibilityFilter;
var getTodos = (state) => todos;
export const getVisib
浏览 2提问于2017-03-21得票数 4
回答已采纳
像这样创建选择器：
import { createSelector } from 'reselect';
export interface Node {
nodeId: number
nodeName: string
}
export type NodeState = {
nodes: Node[];
text: string;
};
const nodeListState = (state) => state.nodeList;
const byKey = (key: keyof NodeState) => createSelecto
浏览 36提问于2021-02-25得票数 1
回答已采纳
我从库获取了以下代码。
使用subtotalSelector调用exampleState时，它将调用接受输入参数exampleState的函数createSelector。
我的问题是createSelector如何接受exampleState和其他使用它的函数？有一些参数的隐式注入发生了，我不明白。
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => sta
浏览 0提问于2017-04-14得票数 1
回答已采纳
1回答
对于回忆录/性能考虑，使用useSelector with ShallowEqual。使用"Reselect/createSelector“选项进行性能优化会有更多的好处吗？还是这两种选择都一样？
大多数选择器都将数据作为JSON数组对象。
在编写新的选择器之前，希望考虑性能/回忆录的好处。
浏览 2提问于2021-03-01得票数 7
2回答
我今天正在尝试reselect中间件，并防止不必要的重呈现。
这是我的reducer.js：
const INITIAL_STATE = {
dogs: 100,
cats: 12312302384
};
const pets = (state = INITIAL_STATE, action) => {
switch (action.type) {
case "CHANGE_DOGS":
return {
...state, dogs: state.dogs + 1
};
case "CHANG
浏览 2提问于2020-03-16得票数 0
您好，我正在尝试测试jest中的createSelector函数，但是我卡住了。所以问题是，对于覆盖率，从来没有在函数getContent的if中输入，而我需要输入。 文件 export const selectDetailsObject = createSelector(
[
(state) => state.objectId,
(state) => state.objects,
],
(
objectId,
objects,
) => getContent(objectId,
浏览 13提问于2019-09-10得票数 1
回答已采纳
我已经将RTK查询设置为我的应用程序中的API层。这取代了以前存储在redux中的数据，redux用于构建选择器(使用重新选择的CreateSelector )。
现在，对于RTK查询，一切都在钩子中，所以我很自然地尝试将CreateSelector中的逻辑移到使用RTK查询结果获取的各种钩子上，如下所示：
useSelectStoreDetailedData = () => {
const {storesData} = useListStoresQuery()
const {productsData} = useListProductsQuery()
const
浏览 8提问于2022-03-14得票数 0
回答已采纳
1回答
我正在实现React + Redux应用程序，并发现了将Reselect集成到我的应用程序中的困难；
下面是我的密码
store.js
import "regenerator-runtime/runtime";
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { createLogger } from 'redux-logger';
impor
浏览 0提问于2018-08-14得票数 0
回答已采纳
2回答
由于一些奇怪的原因，我重新选择的选择器返回这个函数：
ƒ () {
if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
// apply arguments instead of spreading for performance.
lastResult = func.apply(null, arguments);
}
我不明白为何要这样做。它应该返回一些JSON，我可以用它在我的mapToProps中映射。
我的redux映射非常简单，如下所示：
cons
浏览 0提问于2019-03-13得票数 3
回答已采纳
我有套餐减速机。对于嵌套对象，我使用"“库。在下面你可以找到ADD_TODO减速器和选择器，但是当我调用ADD_TODO减速器时，它会产生这样的状态；
{
0: null,
1: null,
}
添加Todo减速器
import { makeSelectTodos } from 'containers/HomePage/selectors';
const initialState = fromJS({
todos: [],
visibilityFilter: 'SHOW_ALL',
});
const todo = (state, a
浏览 2提问于2018-04-27得票数 0
回答已采纳
我正在尝试将重新选择集成到一些redux连接的组件中。根据docs ()，在处理传入的道具时，为了确保正确地回传选择器，您基本上为createSelector创建了一个工厂函数，因此每个调用connect()的组件都有自己的回忆录状态。这是有意义的，我让它在TypeScript中工作：
interface UploadProfileOwnProps {
someValue: string;
}
const getUploadProfile = (state: AppState, props: UploadProfileOwnProps): UploadProfileState =&g
浏览 3提问于2019-12-31得票数 1
6回答
我有个选择：
const someSelector = createSelector(
getUserIdsSelector,
(ids) => ids.map((id) => yetAnotherSelector(store, id),
); // ^^^^^ (yetAnotherSelector expects 2 args)
该yetAnotherSelector是另一个选择器，它接受用户id - id并返回一些数据。
但是，因为它是createSelector，所以我无法将它存储
浏览 0提问于2018-06-21得票数 28
基于我刚刚读取和重新读取的所有Redux和Reselect，下面的选择器只应该在thing.toJS()返回的不可变映射与前一个映射不相等的情况下执行getThing()处理。
...
// Selector
import { createSelector } from 'reselect'
const getThing = (state, thingId) => {
return state.entities.getIn(['things', thingId])
}
const makeThingSelector = () => {
浏览 1提问于2017-03-30得票数 1
回答已采纳
我正在使用Reselect来访问我的React Native项目中的一些嵌套属性(用Typescript编写)： export const userStatsSelector: ((state:any) => UserStats)
= (state: any) => state.user.stats;`
export const projectStatsSelector = createSelector(
userStatsSelector,
stats => stats.projects
)
export const someOtherSelector
浏览 21提问于2019-05-06得票数 0
回答已采纳
3回答
我有以下for循环：
import { createSelector } from 'reselect';
let dirtyForm;
export const isFormDirty = createSelector(
getForms,
getState,
(forms, state) => {
for(let i = 0; i < forms.length; i += 1){
dirtyForm = isDirty(forms[i])(state);
}
r
浏览 0提问于2018-10-01得票数 1
回答已采纳
我有一些困难，理解为什么第一个样本似乎工作正常，但第二个有困难的发射观察员。
// Working reducer
return Object.assign({}, state, {
expanded: Object.assign({}, state.expanded, { clients: !state.expanded.clients })
});
// Faulty reducer - Devtools indicates a change but the observables
// seem to not respond and pass on the informati
浏览 8提问于2017-02-09得票数 1
回答已采纳
2回答
我从useParams收到了一个url param。我想使用mapStateToProps将它传递给选择器。
collection.component.jsx
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
import { selectShopCollection } from "../../redux/shop/shop.selectors";
import './collection.styles.scss&
浏览 9提问于2021-12-15得票数 2
回答已采纳
1回答
我正在寻找Redux echosystem的方法，我遇到了以下缝合:假设我有一个React组件，它应该使用选择器连接到redux状态部分，但这个部分还不存在(未定义)。因此，当运行它时，我得到一个"get on undefined“错误。有没有可能以某种方式定义选择器并将其连接到组件，即使状态部分还不存在？
我使用reselect来创建选择器，这是我用来避免抛出错误的变通方法：
import { createSelector } from 'reselect';
const selectLogin = (state) => state
const loginD
浏览 4提问于2017-07-27得票数 0
1回答
我很难像下面这样访问重选中的对象，希望有人能帮我解决问题。 const data = state => fruit.selectors.data(state);
This will return an object like this:
{
"10.Kroger": {
"fruit": "Banana",
"price": "10",
"store": "Kroger",
},
"5.Heb": {
"
浏览 13提问于2019-10-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
