Repository: draft-js-plugins/draft-js-plugins
Pull request #1505 (2020-09-25 19:23:56)

feat(test): migrating mention-plugin test
## Checklist

- [ ] Fix any eslint errors that occur
- [ ] Update change-log for every plugin you touch
- [x] Add/Update tests if you add/change new functionality
- [ ] Add/Update docs if you add/change functionality
- [ ] Enable "Allow edits from maintainers" for this PR

## Use-case/Problem

Resolving #1477 

## Implementation

Migrating Mention plugin test to Testing Library




Patch:
diff --git a/draft-js-mention-plugin/src/Mention.js b/draft-js-mention-plugin/src/Mention.js
index 18ce26db..192fd75c 100644
--- a/draft-js-mention-plugin/src/Mention.js
+++ b/draft-js-mention-plugin/src/Mention.js
@@ -2,13 +2,18 @@ import React from 'react';
 import clsx from 'clsx';
 
 const MentionLink = ({ mention, children, className }) => (
-  <a href={mention.link} className={className} spellCheck={false}>
+  <a
+    href={mention.link}
+    className={className}
+    spellCheck={false}
+    data-testid="mentionLink"
+  >
     {children}
   </a>
 );
 
 const MentionText = ({ children, className }) => (
-  <span className={className} spellCheck={false}>
+  <span className={className} spellCheck={false} data-testid="mentionText">
     {children}
   </span>
 );


Test patch:
diff --git a/draft-js-mention-plugin/src/Mention/__test__/Mention.js b/draft-js-mention-plugin/src/Mention/__test__/Mention.test.js
similarity index 85%
rename from draft-js-mention-plugin/src/Mention/__test__/Mention.js
rename to draft-js-mention-plugin/src/Mention/__test__/Mention.test.js
index 0476f87b..ae9d4e17 100644
--- a/draft-js-mention-plugin/src/Mention/__test__/Mention.js
+++ b/draft-js-mention-plugin/src/Mention/__test__/Mention.test.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { screen, render } from '@testing-library/react';
 import { Map } from 'immutable';
 import { ContentState } from 'draft-js';
-import { expect } from 'chai';
 import Mention from '../../Mention';
 
 describe('Mention', () => {
@@ -17,14 +16,15 @@ describe('Mention', () => {
       { mention }
     );
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    const result = render(
+
+    render(
       <Mention
         entityKey={entityKey}
         contentState={contentState}
         theme={Map()}
       />
     );
-    expect(result).to.have.tagName('a');
+    expect(screen.getByTestId('mentionLink')).toBeTruthy();
   });
 
   it('renders a Span tag in case no link is provided', () => {
@@ -36,14 +36,15 @@ describe('Mention', () => {
       { mention }
     );
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    const result = render(
+
+    render(
       <Mention
         entityKey={entityKey}
         contentState={contentState}
         theme={Map()}
       />
     );
-    expect(result).to.have.tagName('span');
+    expect(screen.getByTestId('mentionText')).toBeTruthy();
   });
 
   it('can render when mention is an Object', () => {
@@ -55,13 +56,14 @@ describe('Mention', () => {
       { mention }
     );
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    const result = render(
+
+    render(
       <Mention
         entityKey={entityKey}
         contentState={contentState}
         theme={Map()}
       />
     );
-    expect(result).to.have.tagName('span');
+    expect(screen.getByTestId('mentionText')).toBeTruthy();
   });
 });