已经 7 天了,我已经尝试阅读有关此的所有博客,但似乎没有任何效果。
组件:
/* renders the list of the apis */
const ApiSection = ({ categories }) => {
const [page, setPage] = useState(0);
const [query, setQuery] = useState('');
const [search, setSearch] = useState(false);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchAllApis({ page, category: categories, query }));
}, [page, categories, dispatch, search]);
// all these three are showing as undefined when consoled for UNIT TESTS !!!!!!!
const { apiList, error, loading } = useSelector((state) => {
return state.marketplaceApiState;
});
const renderApiCards = () => {
let apis = Object.values(apiList);
return apis.map((each) => (
<ApiCard key={each.apiId} info={each} data-test="ApiCard" />
));
};
return (
<div className="ApiSection" data-test="ApiSection">
<div className="ApiSection__search">
<div className="ApiSection__cards">{renderApiCards()}</div>
<button onClick={() => setPage(page - 1)}>Previous</button>
<button onClick={() => setPage(page + 1)}>Next</button>
</div>
);
};
export default ApiSection;
<块引用>
测试:
const initialState = {
marketplaceApiState: {
apiList: {
a123: { name: 'name', description: 'desc', categories: 'cat', apiId: 'a123'},
},
},
};
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useSelector: () => initialState,
useDispatch: () => mockDispatch,
}));
const setup = () => {
const store = createTestStore(initialState);
// I have also tried mount with Provider
return shallow(<ApiListSection categories={['a']} store={store} />);
};
describe('ApiListSection Component', () => {
afterEach(() => {
jest.clearAllMocks();
});
test('Calls action on mount', () => {
setup();
expect(useSelector).toHaveBeenCalled();
expect(mockDispatch).toHaveBeenCalled();
});
});
<块引用>
错误:
这是我得到的错误:
let apis = Object.values(apiList);
答案 0 :(得分:0)
理想情况下,您不应该模拟钩子,而应该模拟商店。
你应该用这样的东西来模拟你的商店
据我所知,酶不支持钩子,您需要使用 @testing-library/react 对使用钩子的组件进行良好测试
import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { homeReducer } from "../ducks/home";
import { jobReducer } from '../ducks/job';
import { toastReducer } from '../ducks/toast';
const composeEnhancers = compose;
const rootReducer = combineReducers({
home: homeReducer,
toast: toastReducer,
job: jobReducer,
});
const enhancer = composeEnhancers(applyMiddleware(thunk));
export function createTestStore() {
return createStore(rootReducer, enhancer);
}
您可以参考我的 POC 存储库 here
我在那里使用了一些众所周知的工具。所有都列在 repo 的 readme.md 中。