We’ve covered rudimentary use of Jest as part of React testing, also in a stand alone, now let’s look a little more in depth at common testing requirements.<\/p>\n
Unit Test<\/strong><\/p>\n We write tests using Jest like this<\/p>\n Note: there are various aliases such as “it”, “fit”, “xit” or “xtest” that can be used in place of “test”.<\/em><\/p>\n Obviously the “Some test description”<\/em> text should be something meaningful, i.e. what is being tested, any specific inputs and what’s the expectation. Ofcourse how much or how little you write as a description is upto the developer. I tend to write what method is being tested, with any special conditions and expected outcome simply because when the tests run I get a good set of information on what’s working and what’s not, however this is down to the developer’s specific tastes.<\/p>\n We can group tests together within a describe<\/em> function which may allow you to reduce the verbosity of your test descriptions as well as logically group tests, for example<\/p>\n Note: there are a couple of aliases such as “fdescribe” and “xdescribe” which can be used in place of “describe”.<\/em><\/p>\n The output of the Jest test runner would be something like this<\/p>\n Timeout<\/strong><\/p>\n The test<\/em> function also accepts a third argument which can be a timeout (specified in milliseconds). The default timeout is 5 seconds. So for example<\/p>\n Paramterized tests<\/strong><\/p>\n Jest supports paramterized tests using the each<\/em> function, so for example<\/p>\n Using a “table”-like layout of data, the first row made up of column names which map to the input(s) and output along with subsequent rows of inputs and outputs to match against delimited using the pipe | operator. <\/p>\n You can also pass in arrays instead of a table structure, i.e. <\/p>\n We can also supply parameters using the each function of describe<\/em> meaning we can pass the same parameters through multiple tests. Here’s an example of the above two way of passing parameterized data, but using describe<\/p>\n Only run these tests<\/strong><\/p>\n During development we might wish to turn off tests whilst we work on a specific set of tests, we can use the only<\/em> function on either describe or test to basically just run those tests with only<\/em> specified. For example the following syntax (followed by the normal describe and test parameters)<\/p>\n Skipping tests<\/strong><\/p>\n We can run only<\/em> certain tests and the opposite (i.e. run all tests except these), skipping tests using the skip<\/p>\n Todo<\/strong><\/p>\n With @types\/jest version 24 the todo<\/em> function was added to test<\/em>. With this we might have ideas for our tests and want to quickly create stub methods, so we would write<\/p>\n No function should be supplied to a todo test<\/em> and the Jest tester runner will show the test as a “todo” test within it’s output.<\/p>\n Lifecycle functions<\/strong><\/p>\n Most unit testing frameworks include the ability to carry out some process before or after a test, for example setting up a test and cleanup, Jest is no different – including beforeAll<\/em>, beforeEach<\/em>, afterAll<\/em> and afterEach<\/em> functions.<\/p>\n As the names suggest, beforeAll<\/em> and afterAll<\/em> are invoked before the tests start and after the tests all complete, respectively. As you’ll have worked out beforeEach<\/em> and afterEach<\/em> will be invoked before and after each test is run, respectively. <\/p>\n All life cycle functions accept a function to invoke and an optional timeout.<\/p>\n Expectations<\/strong><\/p>\n Obviously these previously mentioned tests will all succeed unless we include expectations\/assertions. Jest includes the expect<\/em> function which you’ll often pass the value your system under test returned (or set) along with a function such as toBe<\/em> which is what you expect the value to be, for using our previous multiplication test<\/p>\n\r\ntest('Some test description', () => {\r\n});\r\n<\/pre>\n\r\ndescribe('fetch component', () => {\r\n test("missing URL, expect empty response", () => {\r\n });\r\n\r\n test("missing invalid, expect error", () => {\r\n });\r\n});\r\n<\/pre>\n\r\nfetch component\r\n \u221a missing URL\r\n \u221a missing invalid\r\n<\/pre>\n
\r\ntest("missing URL, expect empty response", () => {\r\n}, 100);\r\n<\/pre>\n\r\ntest.each`\r\n input | output\r\n ${1} | ${10} \r\n ${5} | ${50} \r\n ${10} | ${100} \r\n `("should return $output when $input is used", ({input, output}) => {\r\n expect(input * 10).toBe(output);\r\n});\r\n<\/pre>\n\r\ntest.each([[1, 10], [5, 50], [10, 100]])\r\n (`should return %i when %i is used`, (input, output) => {\r\n expect(input * 10).toBe(output);\r\n});\r\n<\/pre>\n\r\ndescribe.each`\r\n input | output\r\n ${1} | ${10} \r\n ${5} | ${50} \r\n ${10} | ${100} \r\n `("multiplication with input $input, output $output", ({input, output}) => {\r\n\r\n test("should match", () => {\r\n expect(input * 10).toBe(output);\r\n });\r\n}) \r\n\r\ndescribe.each([[1, 10], [5, 50], [10, 100]])\r\n(`multiplication %i, %i`, (input, output) => {\r\n\r\n test("should match", () => {\r\n expect(input * 10).toBe(output);\r\n });\r\n});\r\n<\/pre>\n\r\ndescribe.only \r\ndescribe.only.each\r\ntest.only\r\ntest.only.each\r\n<\/pre>\n
\r\ndescribe.skip\r\ndescribe.skip.each\r\ntest.skip\r\ntest.skip.each\r\n<\/pre>\n
\r\ntest.todo('multiple number test');\r\n<\/pre>\n\r\nexpect(input * 10).toBe(output);\r\n<\/pre>\n