CODEWITHSUNDEEP
databasereactjsunit-testingjestjsenzyme
kennycodes
kennycodes

Reputation: 536

Test Axios Post Insert/Update using Jest/Enzyme

I am starting to learn React testing with Enzyme/Jest. Some tests that I would want to use are to see whether or not something got inserted/updated in the database. I'm wondering how this could be tested with axios. I heard of axios-mock-adapter and will probably be using that. Is there a way where I can mimic a database insertion/update call without actually inserting/updating entries in the actual database?

For example: I have a method that makes a post request to an api endpoint that inserts new entries into a table in my db. Is there a way to test this with Jest/Enzyme such that

  1. the database does not get modified

  2. I can somehow get a response that tells me that the api call was successful if it were to be executed with the actual database.

I'm not sure if this is something that should be tested on react or if its better to be done in the backend with the database.

I am still really new to this, so any help/tips would be appreciated!

Thank you!

Upvotes: 1

Views: 516

Answers (1)

MackoyokcaM
MackoyokcaM

Reputation: 147

I would suggest going the route of testing on the backend.

When running tests, a good practice is to run your app locally with a local db that you can use for testing. You don't want to use your deployed app and send axios requests to it as that would be as you said, updating the actual db. Also, Jest likes to run tests in whatever order it wants, so it would be hard to expect certain data back when you don't know what has been and not been inserted into the db.

Use a setup and teardown approach. Each test suite should generally setup your server and at the end "tear it down" as well. Separate your test suites by each route/model. This is a good idea because when you will be mocking data or testing your insert routes, you do not want it affecting other tests. So after each test you can also truncate all the data you mocked / inserted.

Example:

test('GET /cats get all cats', () => {
   // Mock 100 of cats
   // Send axios request for all cats
   // Assert 100 cats returned.
});

test('POST /cats insert a cat and then get all should be 1', () => {
   // Send axios request inserting 1 cat with data
   // Send axios request to get that 1 cat.
   // Assert returned cat matches data sent.
});

If the above tests were done in order you would have no worries. But since the tests have no specific order if they were switched, your top test would fail since it would return 101 cats. To prevent that happening you want to setup and teardown...

Example in Jest:

beforeAll(//Start server);
afterAll(//Stop server);
afterEach(//Truncate cats);

test('GET /cats get all cats', () => {
   // Mock 100 of cats
   // Send axios request for all cats
   // Assert 100 cats returned.
});

test('POST /cats insert a cat and then get all should be 1', () => {
   // Send axios request inserting 1 cat with data
   // Send axios request to get that 1 cat.
   // Assert returned cat matches data sent.
});

Upvotes: 0

Related Questions