Enzyme: React DOM being updated after simulating a click, but not the resulting .html()

Question

I wanted to share this puzzling behavior, as, googling, I've found problems which are similar but decidedly not the same.

While I cannot share the exact code I can illustrate what I mean with the following kinda-code-but-not-really:

test.test.jsx:

it('Renders swimmingly', (done) => {
    global.fetch = mockFetchSuperWell();

    const wrapper = mount(makeComponent());
    // makeComponent just wraps my component in a fake router and some providers to make everyone happy.


    process.nextTick(() => {
        wrapper.update();

        var html = cleanHtml(wrapper);

        console.log('------------');
        console.log(html);
        console.log('------------');

        var viewButton = wrapper.find('h3.MuiTypography-body1 a');
        viewButton.simulate('click');

        wrapper.update(); // This does nothing essentially.

        var html = cleanHtml(wrapper);

        console.log('------------');
        console.log(html);
        console.log('------------');

        done();
    });
});

The code contains a DiffDialog (Material UI Dialog with adiff viewer within) that is triggered when you click the link. Now, using my VSCode debugger I can see that the state is altered successfully. Furthermore, if you look for the DiffDialog in the output of .debug() it shows (open, too). But at any point before running done(), .html() doesn't show the expected output (aka an open dialog).

Why is this happening?

Thank you in advance.

Versions of everything:

"devDependencies": {
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@parcel/transformer-sass": "^2.7.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "cypress": "^5.4.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "eslint": "^6.5.1",
    "eslint-plugin-react": "^7.16.0",
    "identity-obj-proxy": "^3.0.0",
    "mochawesome": "^6.1.1",
    "mochawesome-merge": "^4.2.0",
    "parcel": "^2.7.0",
    "postcss": "^8.3.11",
    "postcss-loader": "^6.2.0",
    "postcss-modules": "^4.3.1",
    "prettier": "^2.0.5",
    "terser": "^5.9.0",
    "wait-on": "^5.2.0"
},
"dependencies": {
    "@babel/core": "^7.12.0",
    "@date-io/date-fns": "^1.0.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@material-ui/styles": "^4.11.4",
    "@nivo/bar": "^0.62.0",
    "@nivo/generators": "^0.59.0",
    "@nivo/line": "^0.59.3",
    "@swc/helpers": "^0.2.14",
    "ace-builds": "^1.4.12",
    "brace": "^0.11.1",
    "clsx": "^1.1.1",
    "d3-shape": "^3.0.1",
    "date-fns": "^2.11.1",
    "electron-to-chromium": "1.3.907",
    "history": "^4.10.1",
    "jest": "^25.2.7",
    "mui-datatables": "~3.4.1",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-ace": "^9.1.4",
    "react-beautiful-dnd": "^13.0.0",
    "react-diff-viewer": "^3.1.1",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.1.2",
    "regenerator-runtime": "^0.13.7"
},

Enzyme: React DOM being updated after simulating a click, but not the resulting .html()

0 Answers0