This answers shows how to access all of the different parts of the code using jest. However, it doesn’t necessarily mean that one should test all of these parts this way. The code-under-test is essentially the same as in the question except that I have substituted addEventListener(‘load’, … for onload = …, and I have … Read more
Thanks @Elon Szopos for your answer but I manage to write something much more simple (following https://github.com/airbnb/enzyme/pull/62): import NavLink from ‘../index’; import expect from ‘expect’; import { shallow } from ‘enzyme’; import React from ‘react’; describe(‘<NavLink />’, () => { it(‘should add active class’, () => { const context = { router: { isActive: (a, … Read more
If you have Babel in your stack, you can fix this in the right way using babel-jest Just do npm i –save-dev babel-jest and in your jest settings file add: “moduleNameMapper”: { “^.+\\.(css|less|scss)$”: “babel-jest” }
That issue is caused by many updates inside Component. I got the same issue, this would solve the issue. await act( async () => mount(<App />));
You need to find the StyledButton in the Button component before asserting the props // Button.test.js import React from ‘react’; import { shallow } from ‘enzyme’; import Button from ‘../../components/Button/Button’; import { StyledButton } from ‘./styled’ describe(‘Component: Button’, () => { const minProps = { text: ”, size: ”, }; it(‘renders a button in size … Read more
import { mount } from ‘enzyme’ import React from ‘react’ import ReactDOM from ‘react-dom’ it(‘Should not call action on click inside the component’, () => { const map = {} document.addEventListener = jest.fn((event, cb) => { map[event] = cb }) const props = { actions: { something: jest.fn(), } } const wrapper = mount(<Component {… … Read more
Background Information: jsdom does not implement window.resizeBy() or window.resizeTo() jsdom defines the window innerWidth and innerHeight to be 1024 x 768 It is possible to simulate a window resize using jsdom by manually setting window.innerWidth and window.innerHeight and firing the resize event Here is an example: comp.js import * as React from ‘react’; export default … Read more
Enzyme’s mount takes optional parameters. The two that are necessary for what you need are options.context: (Object [optional]): Context to be passed into the component options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper You would mount SampleComponent with an options object like so: const store = { subscribe: () => {}, dispatch: … Read more
Enzyme is dead. (There will be no React 18 support) you can read the article below for more info but in short: the API changes in React 18 meant that releasing a React 18 Enzyme adapter will not be possible A bit of personal advice While Migrate from Enzyme support article is available, I suggest … Read more
You can check whether a parent component has rendered its child component using containsMatchingElement(). Based on Enzyme docs: Returns whether or not a patternNode react element matches any element in the render tree. Your test should look like this: describe(‘Parent Component’, () => { it(‘renders Child component’, () => { const wrapper = shallow(<Parent store={store} … Read more