如何使用 mockStore 测试 getState()

问题描述

我尝试测试访问商店状态的 redux 操作。我正在使用 redux-mock-store 来模拟商店，但它重新调整未定义。

组件正在分派动作，被分派的动作使用另一个函数来操作数组中的一个项目并返回一个新数组。在这个“助手”功能中，我尝试访问商店数据。当我运行该应用程序时，它运行正常，但我无法对其进行测试。

组件看起来像这样：

export class ArticleComp extends Component {

    toogleIsBoomarked = (article) => {
        console.log(article.isBookmarked )
        !article.isBookmarked ? this.props.storeArticle(article) : this.props.removeArticle(article)

    }
    render(){
        return(
            <div className="container">
            // some normal unrelevant jsx code///
                    <div className="bookmark-container" onClick={() => this.toogleIsBoomarked(this.props.article)}>
                        { !this.props.article.isBookmarked && <BookmarkIcon size={16} className="bookMark" /> }
                        { this.props.article.isBookmarked && <BookmarkFillIcon size={16} className="bookMark" /> }
                    </div>
                </div>
            </div>
        )
    }
}

const mapStatetoProps = state =>{
    return{
        jwtToken: state.userReducer.jwtToken,usernam: state.userReducer.userName
    }
}

const mapdispatchToProps = (dispatch) =>{
    return{
        storeArticle: article => {dispatch(saveUserArticle(article,this.props.userName,this.props.jwtToken))},removeArticle: article => {dispatch(removeUserArticle(article,this.props.jwtToken))}
    }   
}

const ArticleComponent = connect(mapStatetoProps,mapdispatchToProps)(ArticleComp)
export default ArticleComponent;

saveUserArticle 函数是我正在谈论的调度函数，看起来像这样

export const saveUserArticle = (article,username,token) => {
  const articleArray = setBookmarkInDailyArticles(article.title,article.source.name)
  return dispatch => {
    dispatch(setDailyArticles(articleArray))
    dispatch(addArticletoSavedArticleList(article))
    dispatch(storeArticleInDB(article,token))
  }
}

setBookmarkInDailyArticles 就是所谓的辅助函数，就是我尝试访问 eh store 中的文章，操作一篇文章然后返回数组以将其再次保存在 store 中

export const setBookmarkInDailyArticles = (title,source) => {
  const articles = store.getState().articleReducer.dailyArticles.slice()

  const index = articles.findindex((el) => el.title === title && el.source.name === source )
  articles[index].isBookmarked = true
  const bookmarkedArticles = JSON.parse(localStorage.getItem("bookmarkedArticles")) || []

  bookmarkedArticles.push(articles[index])

  localStorage.setItem("bookmarkedArticles",JSON.stringify(bookmarkedArticles))
  return articles      
}

setBookmarkInDailyArticles 的测试看起来像这样

const mockStore = configureMockStore([thunk])
const mock = new MockAdapter(axios)

describe("articleActions",() => {
    let store;

    beforeEach(() =>{
        store = mockStore(
            {articleReducer:{
                savedArticles: dummyArticles,dailyArticles: dailyArticles},userReducer:{
                userName: 'someUser',jwtToken: 'sometoken'
            }
        })

        store.clearactions();
    })
describe("setBookmarkInDailyArticles",() => {
        it("should bookmark article ",() =>{
            const article = dummyArticles[0]
            store.dispatch(actions.setBookmarkInDailyArticles(article.title,article.source.name))
            
            expect(localStorageMock.getItem).toHaveBeenCalled()
            expect(localStorageMock.setItem).toHaveBeenCalled()
            expect(article.isBookmarked).toEqual(true)

当我运行测试时，它说：

    TypeError: Cannot read property 'articleReducer' of undefined

      73 | /**Bookmark Actions */
      74 | export const setBookmarkInDailyArticles = (title,source) => {
    > 75 |   const articles = store.getState().articleReducer.dailyArticles.slice()
         |                    ^
      76 |
      77 |   const index = articles.findindex((el) => el.title === title && el.source.name === source )
      78 |   articles[index].isBookmarked = true

并且文章返回了一个空数组。

此外，我想知道它是否适合在这个 setBookmarkInDailyArticles 函数中拥有业务逻辑，如果我应该在组件中拥有它，然后使用新的文章数组分派一个动作。 我将不胜感激任何帮助。如果您需要更多信息，请告诉我。

非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）