首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jest中使用reselect createSelector函数进行测试?

在使用 Jest 测试 reselectcreateSelector 函数时,你需要确保你的测试覆盖了选择器的输入和输出。reselectcreateSelector 函数用于创建记忆化的选择器,这些选择器可以从 Redux 状态中派生数据。

以下是一个示例,展示如何在 Jest 中测试使用 createSelector 创建的选择器。

示例代码

假设你有一个 Redux 状态和一个选择器如下:

代码语言:javascript
复制
// 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 来测试这个选择器。以下是一个示例测试文件:

代码语言:javascript
复制
// 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']);
  });
});

解释

  1. 基本测试:测试选择器在不同过滤条件下的输出是否正确。
  2. 记忆化测试:测试选择器是否正确记忆化结果,即对于相同的输入,选择器应返回相同的引用。
  3. 重新计算测试:测试选择器在输入变化时是否重新计算结果。

运行测试

确保你已经安装了 Jest,然后在项目根目录下运行以下命令来执行测试:

代码语言:javascript
复制
npx jest

或者,如果你已经在 package.json 中配置了 Jest 脚本,可以运行:

代码语言:javascript
复制
npm test

通过这种方式,你可以确保你的 reselect 选择器在不同情况下的行为是正确的,并且记忆化功能也正常工作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

reselect源码阅读

可谓短小精悍,今天来阅读一波膜拜大佬们的思想 import { createSelector } from 'reselect' const shopItemsSelector = state =...在涉及到大量运算的时候,例如redux,可以避免全局state某一小部分改变而引起这边根据小部分state进行计算的重新执行。起到性能优化的作用。...下面开始阅读探读部分 先说几个简单的工具函数吧 首先是默认的比较函数,代表比较方式,可以根据业务需求换的。默认是进行全等比较 /** * 默认的比较函数,只进行一层全等比较。...就是说有个func函数,每次去调用它的时候,先去比较它的参数是否和上一次参数相同,相等就返回上一次结果,不等就重新计算一遍, 并把结果和参数存到lastArgs、lastResult,这里是用到了闭包来保存的...我们可以根据自己的业务需求进行定制 2、它的内部也使用了defaultMemoize进行优化。

55420
  • 146. 精读《React Hooks 数据流》

    上面的例子,查询函数比较简单,但如果查询函数非常复杂就不一样了: function Child() { const user = useSelector( (state) => ({ user...一种方式是利用 reselect 根据参数引用进行缓存。...此时我们要告诉引用,state.user 是否变化才是重新执行的关键: import { createSelector } from "reselect"; const userSelector =...通过 createSelector 创建的 userSelector 会一层层进行缓存,当第一个参数返回的 state.user 引用不变时,会直接返回上一次执行结果,直到其应用变化了才会继续往下执行。...但 userSelector 提供给多个组件使用时缓存会失效,原因是我们只创建了一个 Selector 实例,因此这个函数还需要再包装一层高阶形态: import { createSelector }

    71920

    【Web技术】639- Web前端单元测试到底要怎么写?

    设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 的最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...selectors selector 的作用是获取对应业务的状态,这里使用reselect 来做缓存,防止 state 未改变的情况下重新计算,先看一下表格的 selector 代码: import...{ createSelector } from 'reselect'; import * as defaultSettings from '@/utils/defaultSettingsUtil';...saga 是一种 es6 的生成器函数 - Generator ,我们利用他来产生各种声明式的 effects ,由 redux-saga 引擎来消化处理,推动业务进行。...这个测试用例的步骤就是利用生成器函数一步步的产生下一个 effect ,然后断言比较。 从上面的注释 3、4 可以看到, redux-saga 还提供了一些辅助函数来方便的处理分支断点。

    3.1K30

    聊聊两个状态管理库 Redux & Recoil

    属性要一个一个 pick,计算属性要依赖 reselect。还有魔法字符串等一系列问题,用起来很麻烦容易出错,开发效率低。 触发更新的效率也比较差。...相对于整个应用程序的其他原子和选择器,该字符串应该是唯一的. get:作为对象传递的函数{ get },其中get是从其他案atom或selector检索值的函数。...传递给此函数的所有atom或selector都将隐式添加到selector的依赖项列表。 set?:返回新的可写状态的可选函数。它作为一个对象{ get, set }和一个新值传递。...get是从其他atom或selector检索值的函数。set是设置原子值的函数,其中第一个参数是原子名称,第二个参数是新值。...去优化, 比如: import { createSelector } from 'reselect'; const shopItemsSelector = state => state.shop.items

    3.5K10

    【译】Redux + React 应用程序架构的 3 条规范(内附实例)

    不论什么时候,你想要使用这块毛团的一个小模块,你都别无选择只能陷入这种巨大的混乱当中。而且更糟糕的是,当你需要修改毛团当中的某些东西,要想不破坏其他东西的话就变得很难了。...这就避免了跟应用其他模块的名字发生冲突。...其他的选择也包括依赖命名约定(比如,将 todos 模块状态装载到使用 todos 作为 key 的状态原子底下),或者你也可以使用模块工厂函数而不是依赖于静态 key。...// todos/selectors.js import { createSelector } from 'reselect'; import _ from 'lodash'; import { NAME...我建议你在组件当中尽可能地使用共享的 selectors。其中一个好处就是可以很轻松地对从 state 到 props 的 mapping 进行单元测试,而不用依赖于组件的测试

    68090

    如何自动化测试 React Native 项目 (下篇) - 单元测试

    Jest Snapshot Test的特点: Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...Reducer测试 Reducer 是纯函数, 因此测试的时候只要引入函数, 传入特定参数,判断函数返回是否符合预期即可。 可以利用 jest 的 snapshot test 来判断结果。...action 利用 jest 的 spy 函数, mock const dispatch = jest.fn(), 然后把 dispatch 传给异步 action 的函数, 并验证 dispatch...可以在 package.json 里面用不同的 yarn script, yarn test-ut, yarn test-wwwapi 来分别执行单元测试和WWW API测试。...Logging 测试 我在 Logging 测试把 logger 这个 module 在初始化测试时 global 的 mock 了一个 spy 函数

    3.3K21

    React App 性能优化总结

    它会带来很多好处,例如: 零副作用 不可变的数据对象更易于创建,测试,和使用; 利于解耦; 更加利于追踪变化; 在 React 环境,我们使用 Component 的概念来维护组件内部的状态,对状态的更改可以导致组建的重新渲染...== {}),因此当 React 进行差异检查时,内联函数将始终使 prop diff 失败。此外,如果在JSX属性中使用箭头函数,它将在每次渲染时创建新的函数实例。...现在,如果我们用 Reselect 重写 addStaticPath ,问题就会消失,因为Reselect 将返回最后一个函数结果,直到它传递新的输入。...何时使用基于JavaScript的动画: 当你想拥有高级效果时,例如弹跳,停止,暂停,倒带,减速或反转; 当你需要对动画进行重度控制时; 当你需要切换动画时,鼠标悬停,点击等; 当使用 requestAnimationFrame...我认为没有测量的优化几乎都是为时过早的,这就是为什么我建议首先对性能进行基准测试和测量。您可以考虑使用 Chrome 时间线分析和可视化组件。

    7.7K20

    React 单元测试策略及落地

    下面看一个 selector 的测试用例: import { createSelector } from 'reselect' // for performant access/filtering in...经过仔细总结,我认为这一层主要的测试内容有五点: 是否使用正确的参数(通常是从 action payload 或 redux 来),调用了正确的 API 对于 mock 的 API 返回,是否保存了正确的数据...使用时,需要牢记你真正关心的业务价值点(也即本节开始提到的 5 点),以及做到在较为复杂的单元测试始终坚守几条基本原则。唯如此,单元测试才能真正提升开发速度、支持重构、充当业务上下文的文档。...取得了正确的参数 map 过的 props 是否正确地被传递给了组件 redux 对应的数据切片更新时,是否会使用新的 props 触发组件进行一次更新 这四个点,react-redux 已经都帮你测过了...但由于它偏功能型的特性,使得它在设计上常会出现一些业务型组件不常出现的设计模式,高阶组件、以函数为子组件等。下面分别针对这几种进行分述。

    1.1K20

    redux、mobx、concent特性大比拼, 看后生如何对局前辈

    所以其实将在本文里登场的选手分别是 redux & react-redux slogan: JavaScript 状态容器,提供可预测化的状态管理 设计理念: 单一数据源,使用函数修改状态 [iyv1qcjfq6...对比mobx,一切都是可以任何拆开任意组合的基础函数,没有this,彻底得面向FP,给一个input预期output,这样的方式对测试容器也更加友好。...useObserver包状态返回UI,concent更注重一切皆函数,在组织计算代码的过程消除的this这个关键字,利用fnCtx函数上下文传递已计算结果,同时显式的区分state和computed的盛放容器对象...定义selector import { createSelector } from "reselect"; // getter,仅用于取值,不参与计算 const getFirstName = state...衍生数据 concent mbox redux(reselect) 自动维护计算结果之间的依赖 Yes Yes No 触发读取计算结果时收集依赖 Yes Yes No 计算函数无this Yes No

    4.6K61

    Angular 接入 NGRX 状态管理

    ; Selector:用于获取存储状态切片的纯函数; Effects:基于流实现的副作用的处理,以减少基于外部交互的状态。...; @ngrx/schematics:提供使用 NGRX 的 CLI 命令,需要与 Angular 进行整合使用; 安装命令: npm install @ngrx/store --save npm install...: 选项 作用 --reducers 执行reducers存放路径,约定路径为上一级的 index.ts,也是 store 创建的文件 --skip-tests 跳过生成测试文件 示例命令: ng generate...} from '@ngrx/store'; 使用导入的函数创建适用于 User 的 Selector: import { createFeatureSelector, createSelector }...Todo 进行添加、更新、删除、批量添加、批量更新、批量删除、清空等操作,还可以通过其内置的 Selector 方便的获取 Todos 数据,数据的长度等等信息,可以简化一大部分的开发时间。

    23610

    JavaScript 测试教程 part 1:用 Jest 进行单元测试

    本文是 JavaScript 测试教程 系列的第1部分 1. JavaScript测试教程-part 1:用 Jest 进行单元测试 2....首先,我将介绍单元测试的基础知识,即测试应用程序的每个部分并检查它们是否适合使用。为此我们将使用 Facebook 开发的测试框架 Jest。它已经准备就绪,并具有进行测试所需的功能。...稍后我们将学习如何在 React 中使用 Jest 首先,让我们创建一些可以测试的简单函数。...你可以调用一组 matcher 函数(例子中使用的 toBe)以某种方式测试该值。有关完整信息,请访问 Jest 文档。 分组测试 每个文件通常会有一个以上的测试。...使用 Jest,你可以使用 describe 函数对它们进行分组。它创建了一个可以合并多个测试的块。

    2.8K20

    React + Redux Testing Library 单元测试

    在同一个文件夹创建一个 math.test.js 文件,在这里我们将使用 Jest测试 math.js 定义的函数: image.png 然后运行 yarn test (添加 NPM Script...}; }); }); 我们可以看到 jest.mock() 方法的第二个参数是一个函数,那么我们就可以完全接管整个 ....从技术上讲,你可以在真实的浏览器运行,但由于在不同平台上启动真实浏览器的复杂性,更建议使用 JSDOM 在虚拟浏览器环境运行 Node 测试。...使用函数来执行修改 为了描述 action 如何改变 state tree ,你需要编写 reducers。这也就是 CQRS command(命令)的一种实现。...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store,而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。

    2.3K10

    干货 | 携程租车React Native单元测试实践

    Jest 周期函数 在写测试用例之前,可以用四个周期函数进行一些处理: beforeAll(() => { console.log('所有测试用例测试之前运行'); }); afterAll(()...(() => { console.log('每个测试用例测试完毕后运行'); }); 五、Jest Mock函数 在单元测试,有许多对象或函数并不需要真实的引用,因此需要mock。...快照将在测试文件的当前文件路径自动生成的snapshots文件夹中保存。当主动修改造成ui变化时,使用jest -u来更新快照。...七、Jest 异步测试 Jest单元测试是同步的,因此面对异步操作fetch获取数据,需要进行异步的模拟测试。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试使用React或者React Native时通常会使用Redux进行状态的管理,需要mock store

    6.1K30

    2024 年必会的 10 个 Node.js 新特性,你还不知道就太落伍了!

    现在,我们来学习如何在开发流程中使用 Node.js 原生测试运行器。...使用 node:test 运行单个测试 要创建一个测试,可以使用 test 函数,传入测试名称和回调函数。在回调函数定义你的测试逻辑。...例如,glob 匹配测试文件: node --test '**/*.test.js' 使用 node:assert 进行测试断言 Node.js 测试运行器支持通过内置的 assert 模块进行断言。...你可能使用过其他测试框架的 Mock 功能, Jestjest.spyOn 或 mockResolvedValueOnce。...在需要避免在测试运行实际代码( HTTP 请求或文件系统 API)时,它们非常有用,可以用存根和模拟来替代这些操作,并在稍后进行检查。

    35510
    领券