Skip to content

Instantly share code, notes, and snippets.

@ahuggins
ahuggins / Foo.spec.js
Created January 25, 2019 15:42
Use .hostNodes() to see only DOM output
import React from 'react';
import { render, mount, shallow } from 'enzyme';
import { Foo } from 'Foo';
describe.only('Test for Foo component', function () {
it('can mount Foo component', function () {
const wrap = mount(
<Foo />
);
console.log(wrap.find('.someCustomClass').hostNodes().debug());
@ahuggins
ahuggins / EditDatasource.spec.js
Created January 25, 2019 16:36
Real World Example of Wrapper issues
import React from 'react';
import { render, mount, shallow } from 'enzyme';
import EditDatasource from './EditDatasource';
describe('tests for EditDatasource', function () {
it.only('changes the datasource.type when a select button is clicked', function () {
const wrap = mount(
<EditDatasource
notify={notify}
navigate={navigate}
@ahuggins
ahuggins / EditDatasource.spec.js
Created January 25, 2019 16:46
Example with Wrapper, adding MemoryRouter
import React from 'react';
import { render, mount, shallow } from 'enzyme';
import EditDatasource from './EditDatasource';
import { MemoryRouter } from 'react-router-dom';
describe('tests for EditDatasource', function () {
it.only('changes the datasource.type when a select button is clicked', function () {
const wrap = mount(
<MemoryRouter>
<EditDatasource
@ahuggins
ahuggins / EditDatasource.spec.js
Created January 25, 2019 17:03
Final Test with instance()
import React from 'react';
import { render, mount, shallow } from 'enzyme';
import EditDatasource from './EditDatasource';
import { MemoryRouter } from 'react-router-dom';
describe('tests for EditDatasource', function () {
it.only('changes the datasource.type when a select button is clicked', function () {
const wrap = mount(
<MemoryRouter>
<EditDatasource
<!-- shallow() -->
<div>
<div className="fooClass">
<Bar />
</div>
</div>
<!-- mount() -->
<Foo>
<div>
<div className="fooClass">
<Bar>
<div>
<div className="barClass">
Something here
</div>
</div>
describe('Something about the tests here', function () {
it('tests one thing', function () {
});
});
describe.only('Something about the tests here', function () {
it('tests one thing', function () {
});
});
<Bar className="someCustomClass">
<div>
<div className="barClass">
<Baz className="someCustomClass">
<div>
<div className="someCustomClass">
<h1>
Baz is rendered
</h1>
</div>
<Bar className="someCustomClass">
<div>
<div className="barClass">
<Baz className="someCustomClass">
<div>
<div className="someCustomClass">
<h1>
Baz is rendered
</h1>
</div>