Add test for TragetGroupsStep

I had some issues with React Testing Library for TS
testing-library/react-testing-library#610

client/package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@types/react-router-dom": "^5.1.5",
     "@types/yup": "^0.29.7",
+    "msw": "^0.21.2",
     "node-sass": "^4.14.1"
   }
 }

client/src/app/pages/calculator/calculator.test.tsx

@@ -1,17 +1,36 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { cleanup, render } from '@testing-library/react';
 import { Calculator } from './calculator';
 
-test('renders standard bonuses header', () => {
-  const { getByText } = render(<Calculator />);
-  const header = getByText(/standardowe bonusy/i);
+const server = setupServer(
+  rest.get('/api/bonuses', (req, res, ctx) => {
+    return res(ctx.json({ greeting: 'hello there' }));
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
 
-  expect(header).toBeInTheDocument();
+afterEach(cleanup);
+
+test('renders standard bonuses header', async () => {
+  const { getByText } = render(<Calculator />);
+  getByText(/standardowe bonusy/i);
 });
 
 test('renders additional bonuses header', () => {
   const { getByText } = render(<Calculator />);
-  const header = getByText(/dodatkowe bonusy/i);
-
-  expect(header).toBeInTheDocument();
+  getByText(/dodatkowe bonusy/i);
 });
+
+// test('renders target group', async () => {
+//   const { getByText } = render(<Calculator />);
+//   const nextButton = getByText(/dalej/i);
+
+//   fireEvent.click(nextButton);
+//   // https://github.com/testing-library/react-testing-library/issues/610
+//   await waitFor(() => getByText(/Target Group/i));
+// });