{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Before Testing (Prep):","type":"text"}]},{"type":"paragraph","content":[{"text":"Separate behavior (hooks) from render to support testing patterns","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"In order to effectively test a component, it is recommended to separate out business logic from its render behavior/output. In practice, this means that for most components you will wind up with a ","type":"text"},{"text":"hooks.js","type":"text","marks":[{"type":"code"}]},{"text":" file, separated from the component file. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"hooks.js","type":"text","marks":[{"type":"code"}]},{"text":" file","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"self-import to allow mocking state (and extra hook methods if you have multiple) when testing hook behaviors","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"// allows mocking state modules from \nimport * as module from './hooks';","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Separate state accessors so that in tests you can individually control/verify the state of different values","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"const state = {\n // Separating state values into separately mock-able methods that forward \n // useState method allows much more effective mocking for testing.\n // The eslint-disable-line call is just to prevent needing to name\n // all of these `useMyStateField`.\n myStateField: (val) => React.useState(val), // eslint-disable-line\n myOtherStateField: (val) => React.useState(val), //eslint-disable-line\n}\n\nconst useMyComponentData = (args) => {\n const [myStateField, setMyStateField] = module.state.myStateField(null);\n ...\n}","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"return callbacks for all behaviors in the component","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"only use useCallback if you have specific optimization needs","type":"text"}]}]},{"type":"listItem","content":[{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"const useMyComponentData = (args) => {\n const [myStateField, setMyStateField] = module.state.myStateField(null);\n const clearMyStateField = () => setMyStateField(null);\n const setMyStateFieldCallback = (val) => () => setMyStateField(val);\n const performanceOptimizedCallback = useCallback(() => {\n doPerformanceIntensiveBehavior(myStateField);\n }, [myStateField]);\n \n return {\n // \n clearMyStateField,\n // \n setMyStateFieldCallback,\n // \n performanceOptimizedCallback,\n };\n}","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"useEffect calls for behaviors on initialization or on state change","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"const useMyComponentData = () => {\n const [myStateField, setMyStateField] = module.state.myStateField(null);\n useEffect(() => {\n doThingOnInitialization();\n }, []);\n useEffect(() => {\n doThingWhenStateFieldChanges(myStateField);\n }, [myStateField]);\n}","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"index.jsx","type":"text","marks":[{"type":"code"}]},{"text":" component file","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Derive values directly from external hook components. This limits the number of sources that need to be mocked to test the component in isolation.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"const MyComponent = (args) => {\n // any state or callback fields directly associated with the component can\n // and should be wrapped in its hooks\n const { myDataField } = hooks.useMyComponentData();\n // Hooks defined at the redux level can simplify access of that data without\n // needing to be separated from the component. \n const { myReduxField } = reduxHooks.useMyReduxData();\n return (...);\n}","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Derive all callbacks from hooks. This means that they can be mocked in tests, with names so that they show up appropriately in snapshots.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"const MyComponent = (args) => {\n // any state or callback fields directly associated with the component can\n // and should be wrapped in its hooks\n const { handleCancel, handleSubmit, handleInputBlur } = useMyComponentData();\n // Hooks defined at the redux level can simplify access to actions without\n // needing to be separated from the component. \n const { setMyReduxField, clearMyReduxField } = useMyReduxActions();\n return (...);\n}","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Internationalize all strings so that you can easily verify against them in render tests.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"import { useIntl } from '@edx/frontend-platform/i18n';\nconst MyComponent = (args) => {\n const { formatMessage } = useIntl();\n return (\n

{formatMessage(messages.heading)}

\n );\n}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"(even easier if you are passing them already translated from the component’s hook file)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"const MyComponent = (args) => {\n const { titleMessage } = hooks.useMyComponentData();\n return (\n

{titleMessage}

\n );\n}","type":"text"}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Return simple JSX with minimal conditional renders. This reduces render tests to a set of conditional states that are validated with snapshots and targeted checks.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Good","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"{args.showError && (...)}\n{args.isInitialized\n ? (\n ...\n ) : (\n ...\n )\n}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Render values and callbacks from hooks or args","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bad","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Complex value derivation (should be separated into hook code)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"

\n {myField ? doThingWithMyValue(aValue) : otherValue + (thirdValue * 3)}\n

","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In-render callbacks (hard to test and snapshot. should be separated into hook code).","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Perform maps where reasonable, but put overly complex maps into their own components.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If a map is over 5-10 lines of code, it could probably be broken into its own component.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Repeated patterns that should be broken into a map (make testing harder than it needs to be)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"\n\n\n\n{[1, 2, 3].map(value => (\n \n))}","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When mapping from static fields, separate for validation","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"export const options = {\n orange: 'red',\n red: 'green',\n purple: 'blue',\n};\nconst MyComponent = (args) => {\n ...\n return (\n

\n {[options.red, options.green, options.blue].map((color) => (\n \n ))}\n

\n );\n};","type":"text"}]}]}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Note: redux hooks","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"redux hooks can be defined at the app-level to further separate component behavior from data logic.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// can provide direct access to selectors\nconst useMyModelData = () => useSelector(selectors.myReduxSelector)\n// can provide direct access to actions\nconst useMyReduxActionMethod = (args) => {\n const dispatch = useDispatch();\n dispatch(actions.myReduxAction(args));\n}\n// can replace thunk actions in many cases\nconst useMyComplexReduxAction = (args) => {\n const dispatch = useDispatch();\n dispatch(actions.myImmediateReduxAction());\n fetch(myUrl).then(data => {\n dispatch(actions.myFetchSuccessReduxAction(args));\n });\n}","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Testing Strategies","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"General","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock Everything","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Leverage setupTest for repeated mocks (react hooks, paragon, etc)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Be intentional about your test structure","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"use ","type":"text"},{"text":"describe","type":"text","marks":[{"type":"code"}]},{"text":" blocks to break up feature sets and conditions. Much easier to have a describe block for “on” state and one for “off” than to include that in all nested tests. Even easier when there are more than 3 states to check against.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"use ","type":"text"},{"text":"test","type":"text","marks":[{"type":"code"}]},{"text":" for statements and ","type":"text"},{"text":"it","type":"text","marks":[{"type":"code"}]},{"text":" for behavioral assertions","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"it('calls initialize on load', () => {});","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"test('snapshot', () => {});","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"test('output includes most recent date', () => {});","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"describe(, () => {\n describe(, () => {\n describe(, () => {\n describe(, () => {\n it('does thing', () => {\n });\n test('statement', () => {\n });\n });\n });\n });\n});","type":"text"}]},{"type":"paragraph"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Hook Tests ","type":"text"},{"text":"hooks.test.js","type":"text","marks":[{"type":"code"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Test the state connections separate from how they connect to the output. This lets you mock the state values for each test.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Test effects separately from output.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock hooks to return output based on their args (recipes below)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"General Flow","type":"text"}]},{"type":"codeBlock","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"// Setup code (preparing mockState and test values)\n\ndescribe('MyComponent hooks', () => {\n // test state hooks\n\n // test hook methods\n // test hook effects\n // test hook output\n // verify output behaviors\n})","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing state","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"const testValue = 'test-value';\ndescribe('myComponent hooks', () => {\n describe('state values', () => {\n test('myStateField state getter should return useState passthrough', () => {\n const useState = (val) => ({ useState: val });\n jest.spyOn(react, 'useState').mockImplementationOnce(useState);\n expect(hooks.state(testValue)).toEqual(useState(testValue));\n });\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mocking and testing State usage in output/behaviors","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"let oldState;\nconst setState = {\n myStateField: jest.fn(),\n otherStateField: jest.fn(),\n};\nconst mockState = () => {\n oldState = hooks.state;\n hooks.state.myStateField = jest.fn(val => [val, setState.myStateField]);\n hooks.state.otherStateField = jest.fn(val => [val, setState.otherStateField]);\n};\nconst restoreState = () => { hooks.state = oldState; };\n\ndescribe('useMyComponentData hook', () => {\n beforeEach(() => {\n mockState();\n });\n afterAll(() => {\n restoreState();\n });\n // test initialization\n test('myStateValue is initialized with null', () => {\n hooks.useMyComponentData();\n expect(hooks.state.myStateField).toHaveBeenCalledWith(null);\n });\n describe('output', () => {\n // test return based off of state value\n test('returns disabled=true iff myStateField is > 2', () => {\n hooks.state.myStateField.mockReturnValue([2, setState.myStateField]);\n out = hooks.useMyComponentData();\n expect(out.disabled).toEqual(false);\n hooks.state.myStateField.mockReturnValue([3, setState.myStateField]);\n out = hooks.useMyComponentData();\n expect(out.disabled).toEqual(true);\n });\n // test calls to setState\n test('handleSubmit sets myStateField to otherStateField current value', () => {\n hooks.state.otherStateField.mockReturnValue([testValue, setState.otherStateField]);\n out = hooks.useMyComponentData();\n expect(setState.myStateField).not.toHaveBeenCalled();\n out.handleSubmit();\n expect(setState.myStateField).toHaveBeenCalledWith(testValue);\n });\n })\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing events","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock useEffect and just check against calls to it.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Be sure to clear all mocks between tests or these calls will just add up","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"check prerequisites and then run the callback and verify behavior","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sometimes it is helpful to add the test to verify the behavior doesn’t run without calling the callback","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"const useMyEffectHook = ({ update, value }) => {\n React.useEffect(() => {\n update(value); \n }, [update, value])\n};\ndescribe('useMyEffectHook', () => {\n beforeEach(() => {\n jest.clearAllMocks();\n })\n it('calls passed update method when passed value or method change', () => {\n const update = jest.fn();\n hooks.useMyEffectHook({ update, value: testValue });\n expect(React.useEffect.mock.calls.length).toEqual(1);\n const [[cb, prereqs]] = React.useEffect.mock.calls;\n expect(prereqs).toEqual([update, testValue]);\n expect(update).not.toHaveBeenCalled();\n cb();\n expect(update).toHaveBeenCalledWith(testValue);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing memos and callbacks","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock useMemo and useCallback to return their passed callback and prerequisites for easy testing.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"(cb, prereqs) => ({ cb, prereqs });","type":"text"}]}]}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"const useMyMemoHook = ({ update, value }) => {\n const memoValue = React.useMemo(() => value + 1, [value]);\n const callback = React.useCallback(() => update(value), [update, value]);\n return {\n callback,\n memoValue\n }\n};\ndescribe('useMyMemoHook', () => {\n describe('output', () => {\n const update = jest.fn(v => v * 2);\n const value = 'test-value';\n beforeEach(() => {\n out = hooks.useMyMemoHook({ update, value })\n });\n test('callback is a memoized call to update(value)', () => {\n const { cb, prereqs } = out.callback;\n expect(prereqs).toEqual([update, value]);\n cb();\n expect(update).toHaveBeenCalledWith(value);\n });\n test('memoValue returns value + 1, memoized based on value', () => {\n const { cb, prereqs } = out.memoValue;\n expect(prereqs).toEqual([value]);\n expect(cb()).toEqual(value + 1);\n });\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component File testing","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock all incoming hooks and components","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"jest.mock('./hooks', () => ({\n useMyHookValues: jest.fn(),\n}));\njest.mock('data/redux/hooks', () => ({\n useMyReduxData: jest.fn(),\n}));\nhooks.useMyHookValues.mockReturnValue(...);\nhooks.useMyHookValues.mockReturnValueOnce(...);\nreduxHooks.useMyReduxData.mockReturnValue(...);\nreduxHooks.useMyReduxData.mockReturnValueOnce(...);","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Ensure all logic (aside from conditional rendering) is separated into hooks.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Determine representational states that your component can be in","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"What are the options for the conditional statements in the render?","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Derive a snapshot per state, and inspect each snapshot for relevant callbacks/pieces of data where relevant.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"codeBlock","content":[{"text":"describe('', () => {\n beforeEach(() => {\n // setup component state\n ...\n el = shallow()\n })\n test('snapshot', () => {\n expect(el).toMatchSnapshot();\n })\n test('', () => {\n expect(el.find(Button).text()).toEqual(testValue);\n })\n});","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Ensure all mocked methods have names so they show up appropriately in snapshots","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"jest.mock().mockName('hooks.useMyHookValues')","type":"text","marks":[{"type":"code"}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If you can separate your messages into the hook file, it becomes extra-easy to inspect the snapshots in the tests for intended messages.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Because we no longer need to rely on mocks of formatted-message (which can get clunky) at that point, we can instead just mock the ","type":"text"},{"text":"translatedMessage","type":"text","marks":[{"type":"code"}]},{"text":" value from the hook and verify directly against it in the output.","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Integration Test Patterns","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Integration tests work well at the top level of the app to test a number of work paths in sequence with a minimal amount of mocking.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Make sure you un-mock everything listed in your setupTest file","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"generally you mainly want to mock api methods.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A simple pattern for mocking api events so that you can control when/if they return/fail","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import api from 'api';\njest.mock('api', () => ({\n myApiMethod: jest.fn(),\n}));\nconst resolveFns = {};\nconst rejectFns = {};\napi.myApiMethod.mockReturnValue(new Promise((resolve, reject) => {\n resolveFns.myApiMethod = resolve;\n rejectFns.myApiMethod = reject;\n}));\n\nconst promise = api.myApiMethod();\n// resolveFns.myApiMethod(response) will force the method to succed\n// rejectFns.myApiMethod(error) will force the method to fail","type":"text"}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Generally for integration tests, react-testing-library’s renderer is more interrogate-able than enzyme’s and thus is preferred.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Where possible, find as few paths to flow through as you can, and verify as much as possible per path.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Helpful Mock Patterns","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Internationalization ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"This mocks formatMessage to return a similar string for snapshot purposes. If any of the passed values are objects, produces a jsx output instead.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"// testUtils\nexport const formatMessage = (msg, values) => {\n let message = msg.defaultMessage;\n if (values === undefined) {\n return message;\n }\n // check if value is not a primitive type.\n if (Object.values(values).filter(value => Object(value) === value).length) {\n // eslint-disable-next-line react/jsx-filename-extension\n return ;\n }\n Object.keys(values).forEach((key) => {\n // eslint-disable-next-line\n message = message.replaceAll(`{${key}}`, values[key]);\n });\n return message;\n};\n// setupTest\njest.mock('@edx/frontend-platform/i18n', () => {\n const i18n = jest.requireActual('@edx/frontend-platform/i18n');\n const PropTypes = jest.requireActual('prop-types');\n const { formatMessage } = jest.requireActual('./testUtils');\n const formatDate = jest.fn(date => new Date(date).toLocaleDateString()).mockName('useIntl.formatDate');\n return {\n ...i18n,\n intlShape: PropTypes.shape({\n formatMessage: PropTypes.func,\n }),\n useIntl: () => ({\n formatMessage,\n formatDate,\n }),\n IntlProvider: () => 'IntlProvider',\n defineMessages: m => m,\n FormattedMessage: () => 'FormattedMessage',\n };\n});","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"React and react-redux Hooks ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"// unmock for integration tests\njest.mock('react', () => ({\n ...jest.requireActual('react'),\n useRef: jest.fn((val) => ({ current: val, useRef: true })),\n useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),\n useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),\n useMemo: jest.fn((cb, prereqs) => ({ useMemo: { cb, prereqs } })),\n useContext: jest.fn(context => context),\n}));\n\n// unmock for integration tests\njest.mock('react-redux', () => {\n const dispatch = jest.fn((...args) => ({ dispatch: args })).mockName('react-redux.dispatch');\n return {\n useDispatch: jest.fn(() => dispatch),\n useSelector: jest.fn((selector) => ({ useSelector: selector })),\n };\n});\n\n// unmock for integration tests\njest.mock('reselect', () => ({\n createSelector: jest.fn((preSelectors, cb) => ({ preSelectors, cb })),\n}));","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Moment (for easier dates) ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"jest.mock('moment', () => ({\n __esModule: true,\n default: (date) => ({\n toDate: jest.fn().mockReturnValue(date),\n }),\n}));","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Mocking ","type":"text"},{"text":"localStorage","type":"text","marks":[{"type":"code"}]},{"text":" in ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"https://www.npmjs.com/package/jest-localstorage-mock\n\nUsage:\n// setupTest.js\nimport 'jest-localstorage-mock';\n\n// *.test.jsx\ndescribe('example test suite', () => {\n beforeEach(() => {\n localStorage.clear();\n jest.clearAllMocks();\n });\n\n it('example test', () => {\n global.localStorage.setItem('hasSeenProductTour', true)\n });\n})","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Mocking Components (and nested components) ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"jest.mock('@edx/paragon', () => ({\n Button => 'Button',\n}))","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"for Nested components (Form, Form.Checkbox are both components) ","type":"text"},{"text":"testUtils.js","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"setupTest.js","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"// testUtils.js\n/**\n * Mock a single component, or a nested component so that its children render nicely\n * in snapshots.\n * @param {string} name - parent component name\n * @param {obj} contents - object of child components with intended component\n * render name.\n * @return {func} - mock component with nested children.\n *\n * usage:\n * mockNestedComponent('Card', { Body: 'Card.Body', Form: { Control: { Feedback: 'Form.Control.Feedback' }}... });\n * mockNestedComponent('IconButton', 'IconButton');\n */\nexport const mockNestedComponent = (name, contents) => {\n if (typeof contents === 'function') {\n return contents();\n }\n if (typeof contents !== 'object') {\n return contents;\n }\n const fn = () => name;\n Object.defineProperty(fn, 'name', { value: name });\n Object.keys(contents).forEach((nestedName) => {\n const value = contents[nestedName];\n fn[nestedName] = typeof value !== 'object'\n ? value\n : mockNestedComponent(`${name}.${nestedName}`, value);\n });\n return fn;\n};\n\n/**\n * Mock a module of components. nested components will be rendered nicely in snapshots.\n * @param {obj} mapping - component module mock config.\n * @return {obj} - module of flat and nested components that will render nicely in snapshots.\n * usage:\n * mockNestedComponents({\n * Card: { Body: 'Card.Body' },\n * IconButton: 'IconButton',\n * })\n */\nexport const mockNestedComponents = (mapping) => Object.entries(mapping).reduce(\n (obj, [name, value]) => ({\n ...obj,\n [name]: mockNestedComponent(name, value),\n }),\n {},\n);\n\n// setupTest.js\njest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({{\n Alert: {\n Heading: 'Alert.Heading',\n },\n Card: {\n Body: 'Card.Body',\n ImageCap: 'Card.ImageCap'\n }\n}})","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"My preferred general-use state-mocking tool (","type":"text"},{"text":"testUtils.js","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"/**\n * Mock utility for working with useState in a hooks module.\n * Expects/requires an object containing the state object in order to ensure\n * the mock behavior works appropriately.\n *\n * Expected format:\n * hooks = { state: { : (val) => React.createRef(val), ... } }\n *\n * Returns a utility for mocking useState and providing access to specific state values\n * and setState methods, as well as allowing per-test configuration of useState value returns.\n *\n * Example usage:\n * // hooks.js\n * import * as module from './hooks';\n * const state = {\n * isOpen: (val) => React.useState(val),\n * hasDoors: (val) => React.useState(val),\n * selected: (val) => React.useState(val),\n * };\n * ...\n * export const exampleHook = () => {\n * const [isOpen, setIsOpen] = module.state.isOpen(false);\n * if (!isOpen) { return null; }\n * return { isOpen, setIsOpen };\n * }\n * ...\n *\n * // hooks.test.js\n * import * as hooks from './hooks';\n * const state = new MockUseState(hooks)\n * ...\n * describe('state hooks', () => {\n * state.testGetter(state.keys.isOpen);\n * state.testGetter(state.keys.hasDoors);\n * state.testGetter(state.keys.selected);\n * });\n * describe('exampleHook', () => {\n * beforeEach(() => { state.mock(); });\n * it('returns null if isOpen is default value', () => {\n * expect(hooks.exampleHook()).toEqual(null);\n * });\n * it('returns isOpen and setIsOpen if isOpen is not null', () => {\n * state.mockVal(state.keys.isOpen, true);\n * expect(hooks.exampleHook()).toEqual({\n * isOpen: true,\n * setIsOpen: state.setState[state.keys.isOpen],\n * });\n * });\n * afterEach(() => { state.restore(); });\n * });\n *\n * @param {obj} hooks - hooks module containing a 'state' object\n */\nexport class MockUseState {\n constructor(hooks) {\n this.hooks = hooks;\n this.oldState = null;\n this.setState = {};\n this.stateVals = {};\n\n this.mock = this.mock.bind(this);\n this.restore = this.restore.bind(this);\n this.mockVal = this.mockVal.bind(this);\n this.testGetter = this.testGetter.bind(this);\n }\n\n /**\n * @return {object} - StrictDict of state object keys\n */\n get keys() {\n return StrictDict(Object.keys(this.hooks.state).reduce(\n (obj, key) => ({ ...obj, [key]: key }),\n {},\n ));\n }\n\n /**\n * Replace the hook module's state object with a mocked version, initialized to default values.\n */\n mock() {\n this.oldState = this.hooks.state;\n Object.keys(this.keys).forEach(key => {\n this.hooks.state[key] = jest.fn(val => {\n this.stateVals[key] = val;\n return [val, this.setState[key]];\n });\n });\n this.setState = Object.keys(this.keys).reduce(\n (obj, key) => ({\n ...obj,\n [key]: jest.fn(val => {\n this.hooks.state[key] = val;\n }),\n }),\n {},\n );\n }\n\n expectInitializedWith(key, value) {\n expect(this.hooks.state[key]).toHaveBeenCalledWith(value);\n }\n\n expectSetStateCalledWith(key, value) {\n expect(this.setState[key]).toHaveBeenCalledWith(value);\n }\n\n /**\n * Restore the hook module's state object to the actual code.\n */\n restore() {\n this.hooks.state = this.oldState;\n }\n\n /**\n * Mock the state getter associated with a single key to return a specific value one time.\n * @param {string} key - state key (from this.keys)\n * @param {any} val - new value to be returned by the useState call.\n */\n mockVal(key, val) {\n this.hooks.state[key].mockReturnValueOnce([val, this.setState[key]]);\n }\n\n testGetter(key) {\n test(`${key} state getter should return useState passthrough`, () => {\n const testValue = 'some value';\n const useState = (val) => ({ useState: val });\n jest.spyOn(react, 'useState').mockImplementationOnce(useState);\n expect(this.hooks.state[key](testValue)).toEqual(useState(testValue));\n });\n }\n\n get values() {\n return StrictDict({ ...this.hooks.state });\n }\n}","type":"text"}]}],"version":1}

Browser not supported