[英]relay modern: how to mock relay for unit testing
我正在嘗試測試反應中繼現代容器,但遇到了這個問題。
TypeError: Cannot read property 'environment' of undefined
下面是測試代碼:
test('render component', () => {
const tree = renderer.create(
<User />,
).toJSON();
expect(tree).toMatchSnapshot();
});
將以下內容添加到__mocks__
文件夾。 然后在測試中添加jest.mock('react-relay');
到需要中繼的單元測試。 這將模擬中繼並只留下要測試的組件。
import React from 'react'; import PropTypes from 'prop-types'; const relayMock = jest.genMockFromModule('react-relay'); const relayChildContextTypes = { relay: PropTypes.object, }; const relayEnvironment = { lookup: jest.fn(), }; const relayContext = { relay: { environment: relayEnvironment, variables: {}, }, }; const relayFragmentProps = { relay: { environment: relayEnvironment, }, }; const relayRefetchProps = { relay: { environment: relayEnvironment, refetch: jest.fn(), }, }; const relayPaginationProps = { relay: { environment: relayEnvironment, hasMore: jest.fn(), loadMore: jest.fn(), isLoading: jest.fn(), }, }; relayMock.__relayEnvironment = relayEnvironment; relayMock.__relayFragmentProps = relayFragmentProps; relayMock.__relayRefetchProps = relayRefetchProps; relayMock.__relayPaginationProps = relayPaginationProps; const makeRelayWrapper = (relayProps) => ( (Comp) => { class HOC extends React.Component { getChildContext() { return relayContext; } render() { return <Comp {...this.props} {...relayProps}/>; } } HOC.childContextTypes = relayChildContextTypes; return HOC; } ); relayMock.QueryRenderer = jest.fn(() => React.createElement('div', null, 'Test')); relayMock.createFragmentContainer = makeRelayWrapper(relayFragmentProps); relayMock.createRefetchContainer = makeRelayWrapper(relayRefetchProps); relayMock.createPaginationContainer = makeRelayWrapper(relayPaginationProps); module.exports = relayMock;
您實際上根本不需要模擬環境變量。 我通常做的是添加:
export class User
到我要測試的類的類聲明。 (確保在同一類的連接版本上保持導出默認值)。
然后,我可以通過導入組件以首選方式測試組件,而無需像在我的測試中這樣的中繼:
import { User } from '../User'
這消除了對模擬中繼的需要,您可以將 props 干凈地傳遞給組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.