{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Brief:","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"As of React 18, Enzyme will no longer be a supported test engine for react code.","type":"text"},{"type":"hardBreak"},{"type":"inlineCard","attrs":{"url":"https://discuss.openedx.org/t/oep-11-update-enzyme-deprecation/10245"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Enzyme is ","type":"text"},{"text":"incredibly prevalent in our code repos","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/search?q=org%3Aopenedx+%22from+%27enzyme%27%22+path%3A%2F%5Esrc%5C%2F%2F&type=code"}}]},{"text":", as well as in community code that uses our platform. We needed a solution that allows the fundamental testing patterns used in this code to persist without major overhauls of code and patterns.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here, I will review a simple library that we will be using in a number of edx repos to replace enzyme with a solution that should provide comparable functionality to the portions of enzyme that we wish to maintain, utilizing code that will persist through React 18, as per a Principal Facebook react developer.","type":"text"}]},{"type":"paragraph","content":[{"text":"Sources:","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://sviat-kuzhelev.medium.com/goodbye-enzyme-future-of-unit-testing-in-react-v-18-10910f034a8b"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://thesametech.com/snapshot-testing-in-rtl/"}},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"What is Enzyme? Why was it important?","type":"text"}]},{"type":"paragraph","content":[{"text":"Enzyme is a testing library in react that focused on low-level component unit testing and snapshots. Code written around and tested with Enzyme is validated through shallow rendering of components and validation of rendered content through snapshots and inspection, with a minimum amount of external dependencies being rendered.","type":"text"},{"type":"hardBreak"},{"text":"As a basic example, this tends to mean that a component that uses internationalization, redux, and paragon (our component library), will not touch any of those pieces of code, but rather have all of those libraries mocked out. In the mindset of unit testing:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"No extra Provider component wrappers necessary ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"No logic or imports from children needing to be regarded","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Child components render as shallow react components with their passed props, but do not run their render or import logic.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"In order to accurately test components with this pattern, we tend to:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Split out all behaviors into hooks that can be independently tested","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For each of the possible render states of the component","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"take a shallow “snapshot” of the render to validate order and notify on changes.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inspect shallow renders to validate props passed to children, based on hooks and component props.","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Why React-Testing-Library is not necessarily a suitable “replacement” for Enzyme","type":"text"}]},{"type":"paragraph","content":[{"text":"A strong contender in the react testing space is the React Testing Library (@testing-library/react). This library focuses on the mindset of testing components “as the user would interact with them”. This is a powerful testing methodology, but makes it a difficult “replacement” for Enzyme. Specifically, in the capability to mock out libraries for validation.","type":"text"}]},{"type":"paragraph","content":[{"text":"The renderer for the testing library renders with jsdom, which requires that all output be in low-level (kebab-case) components, with jsdom-accepted properties, which does not directly represent how react components are used and makes it difficult to validate those components without fully rendering them.","type":"text"}]},{"type":"paragraph","content":[{"text":"In particular, I had trouble coming up with a mocking pattern for component libraries like paragon that support components with features like:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"nested children (Form and Form.Group in a single component)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"refs on mocked components","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"react args passed to jsdom mocked components.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"In addition, one of the core conceits of the React Testing Library is to validate components based on their aria-role, which is very difficult when using mocked components.","type":"text"}]},{"type":"paragraph","content":[{"text":"TL;DR;","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Most of what this means is that ","type":"text"},{"text":"reworking a code base from enzyme to react testing library would require a massive overhaul not just in mocking mechanisms, but in ","type":"text","marks":[{"type":"underline"}]},{"text":"what","type":"text","marks":[{"type":"underline"},{"type":"em"}]},{"text":" is mocked and how things are tested in general","type":"text","marks":[{"type":"underline"}]},{"text":", which would require a massive refactor in those repo’s, and potentially a philosophical disconnect in testing ideologies.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Solution: @openedx/react-unit-test-utils","type":"text"}]},{"type":"paragraph","content":[{"text":"I have built a library that will act very similarly to Enzyme in key ways that allow persistence of react mocking patterns and snapshots. This library builds on the ","type":"text"},{"text":"react-test-renderer","type":"text","marks":[{"type":"code"}]},{"text":", built into react (through React 18) and proposed by a principal Facebook React Developer:","type":"text"},{"type":"hardBreak"},{"type":"inlineCard","attrs":{"url":"https://sviat-kuzhelev.medium.com/goodbye-enzyme-future-of-unit-testing-in-react-v-18-10910f034a8b"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Building on that, I used a small snippet of code that uses simple logic to emulate some of how enzyme renders managed clean/shallow snapshots:","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://thesametech.com/snapshot-testing-in-rtl/"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"The goal is to publish this solution as part of a shared react utils library through an openedx repo, though it is currently in a personal repo: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://github.com/muselesscreator/frontend-lib-react"}},{"text":" .","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The library provides a shallow renderer that:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Supports the same mocking patterns as enzyme","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"This means it will continue to support nested/react-style components.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Allows querying the rendered component (and all children) by","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"findByType (string or component class)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"findByTestID (previously only available in react-testing-library)","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Allows checking if a rendered component or child matches an example snippet of jsx.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Usage","type":"text"}]},{"type":"paragraph","content":[{"text":"In a test file that was using Enzyme, you can replace your enzyme render by replacing a few lines of code","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Shallow Rendering","type":"text"}]},{"type":"paragraph","content":[{"text":"Import","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"// replace\nimport { shallow } from 'enzyme';\n// with \nimport { shallow } from '@openedx/react-unit-test-utils';","type":"text"}]},{"type":"paragraph","content":[{"text":"Snapshots","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"// replace\nel = shallow();\nexpect(el).toMatchSnapshot();\n// with\nel = shallow();\nexpect(el.snapshot).toMatchSnapshot();","type":"text"}]},{"type":"paragraph","content":[{"text":"Inspection (by component type)","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"// replace\nel = shallow();\nexpect(el.findByType(Button).at(0).props().onClick).toEqual(passedOnClick);\n// with\nel = shallow();\nexpect(el.findByType(Button)[0].props.onClick).toEqual(passedOnClick);","type":"text"}]},{"type":"paragraph","content":[{"text":"Inspection (by testID)","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"// Check by testid\nexpect(el.findByTestID(myTestID)[0].props.label).toEqual(testLabel);","type":"text"}]},{"type":"paragraph","content":[{"text":"JSX comparison","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"// compare jsx\nexpect(el.findByTestId(myTestId)[0].matches(

My Header

));","type":"text"}]},{"type":"paragraph","content":[{"text":"Mocking component Libraries","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"jest.mock('@edx/paragon', () => jest\n .requireActual('@openedx/react-unit-test-utils')\n .mockComponents({\n Button: 'Button', //