1

我正在尝试在 Jest 中为我正在处理的 React Native 项目编写测试。我正在使用 redux 和 react-router-native，如果不将它们包装在 Provider 和 MemoryRouter 中，我就无法为测试渲染组件。我正在尝试测试的组件连接到我的 Redux 存储并使用该withRouter功能来访问路由器道具（历史、匹配等）。

我最终得到了这个：

const tree = renderer.create(<Provider store={store}><MemoryRouter><Results /></MemoryRouter></Provider>).toJSON();

这对于快照测试很有效，但是当我尝试测试我的类组件中的函数时遇到了麻烦<Results />。我尝试使用.getInstance()，但这返回 null 因为 Provider 是父级并且它是一个功能组件。

我终于能够在渲染时<Results />使用组件，但结果很难看。.root在我开始之前，我必须挖掘几个级别的孩子。我想知道是否有更好的方法来测试必须包装在 Provider 和 MemoryRouter 组件中才能呈现的类组件上的函数。

import 'react-native'
import React from 'react'
import { MemoryRouter } from 'react-router-native'
import { Provider } from 'react-redux'
import Results from '../components/results/Results'
import renderer from 'react-test-renderer'
import configureStore from 'redux-mock-store'

import { mockResults } from '../__mocks__/results'

const mockStore = configureStore()

describe('Results page numbers tests', () => {
    let store, tree, results


    beforeEach(() => {
        store = mockStore({
            results: mockResults,
            loader: false,
            resultsLoader: false,
            searchPage: 1,
            query: '',
            pages: []
        })
        tree = renderer.create(
          <Provider store={store}>
            <MemoryRouter>
              <Results />
            </MemoryRouter>
          </Provider>
        ).root;
        
        results = tree.children[0].children[0].children[0].children[0]._fiber.stateNode
    })
    
    it('calculates correct number of pages', () => {
        expect(results.numPages()).toEqual(298728)
    })
})

4

0 回答 0