Updating index page tests to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 12:57:53 -04:00
parent d813fdf742
commit 58dc36b0c6
2 changed files with 60 additions and 81 deletions

View File

@ -1,89 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Index Page rendering 1`] = ` exports[`Index Page rendering 1`] = `
<Fragment> <DocumentFragment>
<withI18nextTranslation(Metadata) <span
description="Test description" data-component="withI18nextTranslation(Metadata)"
data-props="{
\\"description\\": \\"Test description\\"
}"
/> />
<noscript> <noscript />
<Message <span
heading="JavaScript Required" data-component="withI18nextTranslation(App)"
type="error" data-props="{
> \\"syntaxList\\": [
<p> {
You need JavaScript to use Regexper. \\"id\\": \\"testJS\\",
</p> \\"name\\": \\"Testing JS\\"
<p> },
If you have concerns regarding the use of tracking code on Regexper, please see the {
<mockConstructor \\"id\\": \\"other\\",
to="/privacy" \\"name\\": \\"Other\\"
>
Privacy Policy
</mockConstructor>
.
</p>
</Message>
</noscript>
<withI18nextTranslation(App)
expr=""
permalinkUrl={null}
syntax="testJs"
syntaxList={
Array [
Object {
"id": "testJS",
"name": "Testing JS",
},
Object {
"id": "other",
"name": "Other",
},
]
} }
],
\\"syntax\\": \\"testJs\\",
\\"expr\\": \\"\\",
\\"permalinkUrl\\": null
}"
/> />
</Fragment> </DocumentFragment>
`; `;
exports[`Index Page rendering with an expression on the URL 1`] = ` exports[`Index Page rendering with an expression on the URL 1`] = `
<Fragment> <DocumentFragment>
<withI18nextTranslation(Metadata) <span
description="Test description" data-component="withI18nextTranslation(Metadata)"
data-props="{
\\"description\\": \\"Test description\\"
}"
/> />
<noscript> <noscript />
<Message <span
heading="JavaScript Required" data-component="withI18nextTranslation(App)"
type="error" data-props="{
> \\"syntaxList\\": [
<p> {
You need JavaScript to use Regexper. \\"id\\": \\"testJS\\",
</p> \\"name\\": \\"Testing JS\\"
<p> },
If you have concerns regarding the use of tracking code on Regexper, please see the {
<mockConstructor \\"id\\": \\"other\\",
to="/privacy" \\"name\\": \\"Other\\"
>
Privacy Policy
</mockConstructor>
.
</p>
</Message>
</noscript>
<withI18nextTranslation(App)
expr="testing"
permalinkUrl="http://example.com"
syntax="test"
syntaxList={
Array [
Object {
"id": "testJS",
"name": "Testing JS",
},
Object {
"id": "other",
"name": "Other",
},
]
} }
],
\\"syntax\\": \\"test\\",
\\"expr\\": \\"testing\\",
\\"permalinkUrl\\": \\"http://example.com\\"
}"
/> />
</Fragment> </DocumentFragment>
`; `;

View File

@ -1,5 +1,12 @@
jest.mock('components/Metadata', () =>
require('__mocks__/component-mock')('components/Metadata'));
jest.mock('components/Message', () =>
require('__mocks__/component-mock')('components/Message'));
jest.mock('components/App', () =>
require('__mocks__/component-mock')('components/App'));
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render } from 'react-testing-library';
import { IndexPage } from 'pages/index'; import { IndexPage } from 'pages/index';
@ -18,19 +25,19 @@ const queryResult = {
describe('Index Page', () => { describe('Index Page', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<IndexPage location={{ hash: '' }} data={ queryResult } /> <IndexPage location={{ hash: '' }} data={ queryResult } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with an expression on the URL', () => { test('rendering with an expression on the URL', () => {
const component = shallow( const { asFragment } = render(
<IndexPage location={{ <IndexPage location={{
hash: '#syntax=test&expr=testing', hash: '#syntax=test&expr=testing',
href: 'http://example.com' href: 'http://example.com'
}} data={ queryResult } /> }} data={ queryResult } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
}); });