Jest 找不到模块

Question

I am just starting out with Jest, and I am trying to test this code that will change the textContent of an element after 1000ms:

 const subtext = document.querySelector('.subtext');

 function delayChangeText() {
    setTimeout(() => {
        subtext.textContent = "Dev";
    }, 1000);
}

subtext.addEventListener('load', delayChangeText);

This is what Jest returns:

FAIL  js/app.test.js
  ● Test suite failed to run

Cannot find module './delayChangeText' from 'js/app.test.js'

> 1 | const delayChangeText = require('./delayChangeText');
    | ^
  2 |
  3 | test('Change the text after 1000 seconds', () => {
  4 |     expect(delayChangeText().toBe(subtext.textContent = "Dev"));
  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)
  at Object.<anonymous> (js/app.test.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.846 s

I am still pretty new to testing, I'm confident I made a pretty simple goof. Any help is much appreciated. Best regards.

Answer 1

The zeroth rule of testing is:

Code must be written such that it is testable

Not all code can be tested. Sometimes you have to change how your real code is written so that a testing framework can get its hands on the code.

I can see one or two critical problems.

First: I assume you didn't include the full content of your application, but it does not look like your app code exports the delayChangeText function, which means that other modules (such as your test suite) can't import it.

You may need to do something like module.exports = delayChangeText , or export default delayChangeText in your app code.

Second: your function is not a pure function. That is, it depends on stuff that's not passed to it explicitly, namely it expects that subtext is defined within its execution context.

It's not strictly required that all your functions be pure functions, and indeed sometimes it's not possible. But pure functions are usually much easier to test (as well as being easier to design and implement). Here's a pure version of your function:

function delayChangeText(element) {
    setTimeout(() => {
        element.textContent = "Dev";
    }, 1000);
}

You don't have to convert this to a pure function, but your code will break in the test unless your test suite takes steps to ensure that subtext.textContent doesn't throw -- if subtext is undefined, it will throw.

This is important for another reason: if this module's default export is the delayChangeText function, then it's probably not appropriate for the preceding subtext assignment to even be in the file. Which means that fixing the first problem ("it's not being exported") will naturally result in converting the function to a pure function. If you really want to avoid that, you can: you'll probably have to change how the function is imported in the test suite, to this:

const { delayChangeText } = require('./delayChangeText');

Finally (and you didn't ask about this -- yet ): you probably don't want this test to have to actually wait 1000 ms to test this function. Jest has some tools for manipulating the global timer functions , which will allow you to validate the function without having to wait.