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
Have a look at the Jest documentation for Webpack integration. The problem is that Jest can’t work with other stuff than JavaScript. So you have to mock all non-JavaScript files you import. The easiest way is to configure a moduleNameMapper in your Jest configuration. { “jest”: { “moduleNameMapper”: { “\\.(css|scss)$”: “<rootDir>/__mocks__/styleMock.js” } } } With … Read more
To answer your last question, the recommended approach is to use <MemoryRouter>< *your component here* ></MemoryRouter> in your tests. Typescript does not pick up that this component will pass the required props to your component, as such I assume it not to be a type safe approach. This is for React Router v4 and doesn’t … Read more
Here is the solution only use jestjs and typescript, nothing more. index.ts: export function getUserInfo() { const userInfo = window.sessionStorage.getItem(‘userInfo’); if (userInfo) { return JSON.parse(userInfo); } return {}; } index.spec.ts: import { getUserInfo } from ‘./’; const localStorageMock = (() => { let store = {}; return { getItem(key) { return store[key] || null; }, … Read more
What the documentation means by “stubbed child components” is that every components within the tested one will not be rendered. Instead, you will have a placeholder component. This prevent your tests to be parasite by other component’s behaviors. In my opinion, you should always shallow mount your components when doing unit tests, and simply mount … Read more
Just a quick tip, if you have multiple matching elements, you can query like this: HTML: <a href=”/my-element”>My element</a> <a href=”/my-element”>My element</a> TEST: test(‘renders my element’, () => { let link = screen.getAllByText(‘My element’)[0] as HTMLAnchorElement; expect(link.href).toContain(‘/my-element’); });
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
Here expect(new TestObject()).toThrow(); new TestObject() is evaluated first, then expect(…), then …toThrow(), in accordance with operator precedence. When new TestObject() throws, anything else doesn’t matter. This is why toThrow expects a function that is supposed to throw: expect(() => { new TestObject(); }).toThrow(); This way it can be wrapped with try..catch internally when being called. … Read more
Don’t have to download any deps, just use: Object.defineProperty(window.document, ‘cookie’, { writable: true, value: ‘myCookie=omnomnom’, }); (writable needs to be set to true)
To set a timeout on a single test, pass a third option to it/test, for example: it(‘testing balabala’, async () => { … }, 70000);