在使用 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
选择器在不同情况下的行为是正确的,并且记忆化功能也正常工作。
领取专属 10元无门槛券
手把手带您无忧上云