Understanding how react-testing-library works with Kent C. Dodds

Test JavaScript with Jest

Add Babel Integration with Jest

Track project code coverage with Jest

Use Jest's Interactive Watch Mode

Use Jest's Snapshot Testing Feature

Use Test Driven Development

Testing JavaScript with Jest

In this lesson, we'll write a brand new function called `arrayify` using the Test Driven Development workflow of red-green-refactor. Test Driven Development (aka TDD) is great because it helps you focus on one task at a time and when you're all finished, you can refactor or add features with confidence because the test suite acts as a safety net. In this lesson we're using the amazing [Jest](https://facebook.github.io/jest/) testing framework.

[00:00] To start, we're going to require array affy, with const array affy equals require array affy. Then, we'll write our first failing test, returns an empty array when given nothing. We'll assign the result to a call to array affy with nothing. Then, we'll expect that result to equal an empty array.

[00:20] Let's fire up Jest watch mode with our test con watch script. Now, we see we have our first failing test. It's failing, because we haven't even created the array affy file yet. Let's create that file, array affy.js, and with that our test is now failing, because we're not exporting the array affy function.

[00:41] Let's create that function and do the minimal amount of work to make our test pass. We'll assign module.x ports to array affy, and we'll define the array affy function and return an empty array. That gets our test passing.

[00:57] Now with that, we'll create a new test for array affy, saying that it returns the arrayed version of what it is given. We'll assign the input to a string, "Hi there," and assign the result to what we get back from array affying that input. Then, we'll expect the result to equal an array with the input.

[01:21] Now, our test is failing, because we expected to receive an array with the string, "Hi there," but actually received just an empty array. Let's make the minimal amount of changes to make our test pass. We'll accept input and we'll return an array with that input.

[01:37] Now our first test is failing, because of these changes, and we're not done until our new test and our previous test are all passing. Let's refactor this, so they all pass. We'll check whether input is undefined, and if it is, we'll return an empty array. Otherwise, we'll return an array version of the input. Awesome! We're almost done.

[01:58] Let's add one more final test that says it returns the array, if it is given an array. With this, we'll make our input be the array 1, 2, 3. We'll assign our result to the arrayed version of that input, and expect the result to equal the input.

[02:17] Now this test is failing, because we expected to get the array 1, 2, 3, but we actually received an array of an array 1, 2, 3. Let's go update array affy to handle this case as well, by making as minimal changes as possible to make all the tests pass.

[02:35] We'll first check whether the input is an array, and if it is, we'll simply return the input. Otherwise, we'll continue doing the rest of the stuff we've been doing already. Cool! All our tests are passing, but that function is a little more complex than it needs to be.

[02:49] It's important to not skip the refactor step of the red, green refactor cycle of the test driven development. Let's refactor this so it's a little more clean, while still keeping the test passing. We can get rid of this input equals undefined the check, by simply using a default perimeter.

[03:07] We'll default our input to be an array. With that, our test is still passing, but now, this undefined check is not needed. So, we can remove that and our test continues to pass.

Course

Testing JavaScript with Jest

Use Test Driven Development

Share this video with your friends